jQuery延迟（）和淡出（）答案

【问题标题】：Jquery delay() and fadeOut()jQuery延迟（）和淡出（）
【发布时间】：2014-05-16 07:44:09
【问题描述】：

我遇到了一个小问题，我想在单击其他块时淡入特定块，然后等待 2.5 秒并淡出特定块。这是我到目前为止的代码：

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).queue(function() {$(this).fadeOut(1600, complete)});
});

fadeIn 运行良好，延迟功能也运行良好。但是 fadeOut 似乎不起作用（我是否将其更改为 .fadeOut(1600) 或只是 .fadeOut() 都没有关系）问题可能出在哪里？

这是完整的代码，因为上面有更简化的版本。

HTML：

<div class="account-edit-group">    
                    <input type="text" value="" class="account-edit-field">
                    <div>
                        <button class="account-edit-field-save"> </button><button class="account-edit-field-cancel"> </button>
                    </div>  
                    <div class="account-edit-field-warning"><span class="w-text">Error! You can enter no more than 30 symbols</span></div>
        </div>

JS：

$('button.account-edit-field-save').click(function () {
      var checklength = $(this).parent().parent().find('input.account-edit-field');  
        if(checklength.val().length > 30)
        {
        $(this)
        .parent()
        .parent()
        .find('.account-edit-field-warning')
        .fadeIn()
        .delay(2500).queue(function() {
        $(this).fadeOut(1600, complete).dequeue(); 
        });     
        }
        if(checklength.val().length <= 30)
        {
        $(this)
        .parent()
        .parent()
        .removeClass('acc-edit-f')
        }
      });

所以 JS 正在检查点击了哪个按钮，如果点击了按钮保存 - 它会检查上面字段的值。如果有超过 30 个符号 - 它将显示错误消息。我需要先淡入，显示一点，然后淡出。这就是问题所在，它不会淡出，我不知道为什么。

【问题讨论】：

请也发布您的 HTML..
您希望我发布此问题的完整代码吗？很大，可以吗？
只需发布 .specific-block 元素

标签： jquery delay fadein fadeout

【解决方案1】：

您可以通过传入这样的回调来等待淡入首先完成：

$('element').fadeIn(function () {
   // Fade in complete
});

淡入完成后，您可以继续延迟并淡出。

$('button.other-block').click(function () {
   $(this)
     .find('.specific-block')
     .fadeIn(function () {
        $(this).delay(2500).fadeOut(1600, complete);
     });
});

如果它不起作用，请切换到 Mootools ;)

编辑：工作示例http://jsfiddle.net/tbleckert/RcL5y/

【讨论】：

它也不起作用......好吧，是的，看起来我需要mootools。
只是为了指出那些通过谷歌达到@tbleckert 答案的人，complete 是指在fadeOut 完成时运行的函数

【解决方案2】：

只要做：

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).fadeOut(1600, complete);
});

【讨论】：

【解决方案3】：

你可以试试.fadeIn()中的回调函数：

$(this).closest('.account-edit-group').find('.account-edit-field-warning')
       .fadeIn('normal', function(){
          $(this).delay(2500).fadeOut();
       });

虽然这应该可行：

 $(this).closest('.account-edit-group')
        .find('.account-edit-field-warning')
        .fadeIn()
        .delay(2500)
        .fadeOut();

【讨论】：

【解决方案4】：

尝试在此处使用 .dequeue()：

$('button.other-block').click(function () {
    $(this)
    .find('.specific-block')
    .fadeIn()
    .delay(2500).queue(function() {
        $(this).fadeOut(1600, complete).dequeue(); 
    });
});

【讨论】：