淡出完成后該如何做jQuery？

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版本> = 1.5，則可以/應該使用Deferred對象，而不要使用callback參數：

$('#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的作用： http : //jsfiddle.net/wGcgS/2/