jQuery UIは、クリックフェードとホバーフェードが一緒に機能しないようにします。

フェードの種類は互いに独立していますが、ホバーフェードがトリガーされるとすぐにクリックフェードが停止します。ここに私のコードは次のとおりです。あなたは色の正方形のいずれかを上にマウスを移動しないようにしてください場合はjQuery UIは、クリックフェードとホバーフェードが一緒に機能しないようにします。

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

、上部のテキストは、あなたがそれをクリックしたときに動作します。「View Blue」をクリックすると、青色を除くすべてが消えて30％の不透明度になります。もう一度クリックすると、100％の不透明度に戻ってすべて消えます。色のついた四角の上にマウスを置くと同じことが起こりますが、テキストを再び使用しようとすると機能しません。

これは何が起こっているのですか？

ありがとうございました！

出典

2012-05-12 Adam R

問題は、CSSクラスで適用されたルールを使用して混合し、シェーディングするDOMノードのstyle属性を設定することです。

あなたのホバーコードは、影付きブロックのstyle: opacityを設定し、クリックコードは、opacityのルールを持つCSSクラスを設定します。

CSSルールとstyleの両方の属性が存在する場合、style属性はより具体的なものになり、有効になります。したがって、ブロック上にマウスを置いてstyle属性を設定すると、!importantを使用するCSSルールをオーバーライドできる唯一の方法です。この変更を行うと、デモが動作します。

.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属性を不透明度値で設定するか（両方ではなく）、アプリケーションを切り替える必要があります。

出典

2012-05-12 11:17:05

これは素晴らしいことです。私はjQueryにとって非常に新しく、CSSルールとスタイル属性を混在させることさえ考えませんでした。あなたが持っている例に関する私の1つの質問は、 "View Red"をクリックすると青と緑が消えてしまうことです。もう一度 "View Red"をクリックすると消えません。それは2秒待ってから青と緑を100％不透明にします。なぜそれが起こっているのか知っていますか？ –

ところで、私はちょうどスタイル属性で動作するようにクリックエフェクトを変更し、それは完璧に動作します。ご指導ありがとうございます！ –

jQuery UIは、クリックフェードとホバーフェードが一緒に機能しないようにします。

答えて

関連する問題