Geek asks and answers

The jQuery user interface combines fading and freezing that doesn't work together

I have two types of attenuation that work independently of each other, but the click disappears as soon as the hover fades. Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js">
    /*window.onload = function(){alert("welcome");}*/
</script>

<style>
body {
    text-align:center
}

#container {
    width:660px;
    margin: 0 auto;
    border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color:#CCCCCC;
    overflow:auto;
    padding: 0 5px 5px 5px;
}

div.mainSize {
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.verticalBox {
    width:100px;
    height:210px;
    padding:5px;
}

div.horizBox {
    width:210px;
    height:100px;
    padding:5px;
}

div.mainSizegreen {
    background-color:#006600;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.mainSizered {
    background-color:#FF0000;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.mainSizeblue {
    background-color:#0000FF;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
    /*opacity:0.2;
    filter:alpha(opacity=20);*/
}

div.navigation {
    text-align:center;
    width:500;
    margin-bottom:20px;
}

a.viewBlue{
    color:#000099;
}

a.viewGreen{
    color:#006600;
}

a.viewRed{
    color:#FF0000;
}

.Opac20 {
    filter:alpha(opacity=30);  // IE
    -moz-opacity:0.3;          // Firefox
    -khtml-opacity: 0.3;       
    opacity: 0.3; 
}
</style>

</head>

<body>
    <div id="container">
        <div class="navigation">
            <p><span class="viewBlue">View Blue</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="viewRed">View Red</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="viewGreen">View Green</span></p>
        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>

    </div>
<script>
$(document).ready(function(){



   $("span.viewBlue").click(function(){
     if($("div.mainSizered:first").hasClass("Opac20") && $("div.mainSizegreen:first").hasClass("Opac20")){
         $("div.mainSizered").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizeblue").addClass("Opac20");

         $("div.mainSizeblue").toggleClass("Opac20");
     } 
   });

   $("span.viewGreen").click(function(){
     if($("div.mainSizered:first").hasClass("Opac20") && $("div.mainSizeblue:first").hasClass("Opac20")){
         $("div.mainSizered").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizeblue").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizegreen").addClass("Opac20");
         $("div.mainSizeblue").stop(true, true).addClass("Opac20", 1000);

         $("div.mainSizegreen").toggleClass("Opac20");
     }
   });

   $("span.viewRed").click(function(){
     if($("div.mainSizeblue:first").hasClass("Opac20") && $("div.mainSizegreen:first").hasClass("Opac20")){
         $("div.mainSizeblue").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").addClass("Opac20");
         $("div.mainSizegreen").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizeblue").stop(true, true).addClass("Opac20", 1000);

         $("div.mainSizered").toggleClass("Opac20");
     }
   });

   // THIS IS FOR HOVERING WITH TRANSITION A DIV  
   $("div.mainSizeblue").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "0.4"}, "slow");
     },
     function(){
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");

   });

   $("div.mainSizegreen").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");
     },
     function(){
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");

   });

   $("div.mainSizered").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "0.4"}, "slow");
     },
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");

   });




 });

</script>
</body>
</html>

If you do not hover over any square of color, the text at the top works when you click on it. If you click "View Blue", it will fade all but blue to 30% opacity. Click it again and it will all disappear again to 100% opacity. The same thing happens when you hover over a colored square, but when you try to use text again, this will not work.

Any ideas why this is happening?

Thank you for your help!

+3
source share
1

, , CSS, style DOM, .

style: opacity , CSS opacity .

CSS style , style , . , style, , CSS, - !important. .

.Opac20 {
    filter:alpha(opacity=30) !important;  // IE
    -moz-opacity:0.3 !important;          // Firefox
    -khtml-opacity: 0.3 !important;       
    opacity: 0.3 !important; 
}​

- http://jsfiddle.net/Ds6MF/2/.

!important , . CSS style , .

0

More articles:


All Articles