2012-05-12 52 views
3

我有两种独立工作的淡入淡出效果,但点击淡入淡出效果一旦触发就停止工作。这里是我的代码: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> 

如果你确保没有悬停在任何色块,在顶级作品的文本,当你点击它。如果您点击“查看蓝色”,它会褪色一切,但蓝色为30%不透明度。再次点击它会将所有内容都淡化为100%不透明度。当您将鼠标悬停在彩色正方形上时会发生同样的情况,但是当您尝试再次使用文本时,它将不起作用。

任何想法为什么会发生这种情况?

感谢您的帮助!

回答

0

你的问题是你使用通过CSS类应用的规则进行混合,并设置你正在着色的DOM节点的style属性。

您的悬停代码设置了阴影块的style: opacity,点击代码设置了一个具有opacity规则的CSS类。

当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

很好。我对jQuery非常陌生,甚至没有考虑过混合CSS规则和样式属性。我对你的例子的一个问题是,如果你点击“查看红色”,它会变成蓝色和绿色。当你再次点击“查看红色”时,它不会褪色。它等待一秒钟,然后使蓝色和绿色100%不透明。你知道这是为什么吗? –

+0

顺便说一句,我只是改变了点击效果来处理样式属性,它的工作原理完美无瑕。感谢您的指导! –