jquery-ui - jQuery UIは、クリックフェードとホバーフェードが一緒に機能しないことを組み合わせています

Question

互いに独立して機能する2種類のフェードがありますが、ホバーフェードがトリガーされるとすぐにクリックフェードが機能しなくなります。これが私のコードです：

<!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>

どの色の四角にもカーソルを合わせないように注意すると、クリックすると上部のテキストが機能します。[青を表示]をクリックすると、青以外のすべてが30％の不透明度にフェードします。もう一度クリックすると、すべてが100％の不透明度にフェードバックします。色付きの正方形にカーソルを合わせると同じことが起こりますが、テキストをもう一度使用しようとすると機能しません。

なぜこれが起こっているのか考えはありますか？

ご協力いただきありがとうございます！

score 0 · Accepted Answer

問題は、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、不透明度の値を使用して属性を設定するか、両方ではないようにアプリケーションを切り替える必要があります。

jquery-ui - jQuery UIは、クリックフェードとホバーフェードが一緒に機能しないことを組み合わせています

1 に答える 1

Related

Reference