我试图在向图像添加类后淡出图像,但由于某种原因它似乎避免了过渡并在没有过渡的情况下消失。
我要添加的类只是将其倾斜 90 度的类。
这是我的 jsfiddle,可以看到它的实际效果:http://jsfiddle.net/sqHxq/4/
这是我的代码:
HTML
<div id="logo" style="z-index:10">
<img src="http://s17.postimg.org/lb2un1g0r/image.png" alt ="">
</div>
<div id="other" style="z-index:0">
<img src="http://cdn1.iconfinder.com/data/icons/humano2/32x32/actions/old-edit-redo.png" alt="">
</div>
CSS
.tilt {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
#logo {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}
#other {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
}
Javascript
$(document).ready(function () {
$('#logo').hide().delay(250).fadeIn(1000);
$('#other').hide().delay(750).fadeIn(1000);
$("#logo").click(function() {
$('#logo').addClass("tilt").fadeOut(2000);
});
});
最佳答案
看起来淡入淡出需要发生在图像上而不是 div 上。现在你的 div 正在褪色然后设置为 display:none;所以你需要淡化图像。
$(document).ready(function () {
$('#logo').hide().delay(250).fadeIn(1000);
$('#other').hide().delay(750).fadeIn(1000);
$("#logo").click(function() {
$('#logo').addClass("tilt");
$('#logo').find('img').fadeOut(2000);
});
});
关于javascript - JQuery:添加类后淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17325685/