[英]JQuery: Fadeout After Adding Class?
I'm trying to fade out an image after adding a class to it, but for some reason it seems to avoid the transition and disappears without the transition. 我试图在向其添加类后淡出图像,但是由于某种原因,它似乎避免了过渡,并且在没有过渡的情况下消失了。
The class I'm attempting to add is just a class that tilts it 90 degrees. 我尝试添加的类只是将其倾斜90度的类。
Here's my jsfiddle to see it in action: http://jsfiddle.net/sqHxq/4/ 这是我的jsfiddle,可以看到它的实际效果: http : //jsfiddle.net/sqHxq/4/
Here's my code: 这是我的代码:
<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>
.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;
}
$(document).ready(function () {
$('#logo').hide().delay(250).fadeIn(1000);
$('#other').hide().delay(750).fadeIn(1000);
$("#logo").click(function() {
$('#logo').addClass("tilt").fadeOut(2000);
});
});
Looks like the fade needs to happen on the image and not the div. 看起来需要在图像上而不是在div上发生淡入淡出。 Right now your div is fading and then sets to display:none;
现在,您的div正在衰减,然后设置为display:none; so you need to fade the image.
因此您需要淡化图像。
$(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);
});
});
I took a different approach, and added opacity to the CSS transition. 我采用了另一种方法,并为CSS过渡添加了不透明度。 You can see it here: http://jsfiddle.net/sqHxq/10/ I did have to add
important
to get it to register, which I know isn't exactly proper. 您可以在这里看到它: http : //jsfiddle.net/sqHxq/10/我确实必须添加一些
important
才能进行注册,我知道这并不完全正确。 I think with some tweaking you could do it better than I did. 我认为通过一些调整,您可以比我做得更好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.