Question

我正试图在点击时淡出div，但也会改变一些css值。

我所拥有的问题是，当淡出发生时（太早），值会发生变化。淡出完成后，我需要更改值：

<script type="text/javascript">
$('#r_text').click(function() { 
    $(".box1_d").fadeOut();
    $(".box1_c").css("top","0px");
});
</script>

现在，当我运行它时，一切正常但不完全是我喜欢它...我需要在淡出完成后更改css值，而不是在它仍然发生时。

这可能吗？

若然，有什么想法？

谢谢。

Answer 1

使用回调函数将.css()修改为fadeOut()的第二个参数。当淡入淡出完成时会触发。

<script type="text/javascript">

var fadeTime = 500;
$('#r_text').click(function() { 
    $(".box1_d").fadeOut(fadeTime, function() {
      $(".box1_c").css("top","0px");
    });
});
</script>

Answer 2

如果你使用jQuery版本＆gt; = 1.5，你可以/ utilize the Deferred object而不是使用回调参数：

$('#r_text').click((function () {
    var animations = {
        initial: function () {
            return $(".box1_d").fadeOut(1500);
        },
        following: function () {
            return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
        },
        onDone: function () { 
            alert('DONE!'); 
        }
    };
    return function(e) {
        $.when(animations.initial())
            .pipe(animations.following)
            .done(animations.onDone);
        e.preventDefault();
    };
}()));

JsFiddle of the action in action：http://jsfiddle.net/wGcgS/2/

jquery一旦淡出怎么办？

2 个答案: