Question

我不知道要给出什么标题，所以请为此道歉，我只是好奇为什么在下面的代码中，即使我在淡入淡出之后将文字淡出，它也会在变淡之前发生变化。

$('form').submit(function(){
    return false;
});
$('button').on('click',function(){
    $(this).addClass('busy');
    $(this).parent().find('button').attr('disabled',true);
    $(this).parent().find("button:not('.busy')").fadeOut(500);
    $('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
    //this line below
    $(this).delay(1000).fadeOut(500).text('Complete!');
    $(this).fadeIn(500,function(){
        $(this).delay(500).fadeOut(500);
    });
});

http://jsfiddle.net/v4nwQ/

为什么会这样，我该如何解决？

Answer 1

因为fadeOut()在动画完成之前立即返回; text()然后立即处理。您应该改为fadeOut()回调中的文字;

$(this).delay(1000).fadeOut(500, function () {
    $(this).text('Complete!');
});

无关，但需要注意;你应该看看缓存$(this)的结果;你经常打电话。

$('p').on('sfsfsf',function(e,data){
    var self = $(this);

    self.delay(1000).fadeOut(500, function () {
        self.text('Complete!');
    });

    self.fadeIn(500,function(){
        self.delay(500).fadeOut(500);
    });
});

Answer 2

是的，这是正确的。链中的所有函数都会立即执行。如果您想在动画后执行某些操作，请使用所有动画包含的回调参数。

延迟仅延迟动画！它对不是动画的东西没有影响。所以：

$(this).fadeOut(500, function() { $(this).text('Complete!'); });

Answer 3

尝试：

$(this).parent().find("button:not('.busy')").fadeOut(500, function() {
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});

Answer 4

您需要更改淡入淡出的回调函数中的文本，就像您在最后几行中所做的那样：

$(this).fadeIn(500,function(){
        $(this).delay(500).fadeOut(500);
    });

否则立即执行文本更改

.text（）立即被处理

4 个答案: