jQuery：添加类后淡出？

Question

我试图在向其添加类后淡出图像，但是由于某种原因，它似乎避免了过渡，并且在没有过渡的情况下消失了。

我尝试添加的类只是将其倾斜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);
});
});

Answer 1

看起来需要在图像上而不是在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);
    });
});

Answer 2

我采用了另一种方法，并为CSS过渡添加了不透明度。 您可以在这里看到它： http : //jsfiddle.net/sqHxq/10/我确实必须添加一些important才能进行注册，我知道这并不完全正确。 我认为通过一些调整，您可以比我做得更好。