我有两种独立工作的淡入淡出效果,但点击淡入淡出效果一旦触发就停止工作。这里是我的代码: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> <span class="viewRed">View Red</span>
<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%不透明度。当您将鼠标悬停在彩色正方形上时会发生同样的情况,但是当您尝试再次使用文本时,它将不起作用。
任何想法为什么会发生这种情况?
感谢您的帮助!
很好。我对jQuery非常陌生,甚至没有考虑过混合CSS规则和样式属性。我对你的例子的一个问题是,如果你点击“查看红色”,它会变成蓝色和绿色。当你再次点击“查看红色”时,它不会褪色。它等待一秒钟,然后使蓝色和绿色100%不透明。你知道这是为什么吗? –
顺便说一句,我只是改变了点击效果来处理样式属性,它的工作原理完美无瑕。感谢您的指导! –