Jquery的delay()和fadeOut()函数

Question

我有一个小问题，当我点击一个块时，我希望另一个特定的块淡入，然后等待2.5秒后淡出。以下是我现在有的代码：

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

fadeIn正常工作，delay功能也正常运行。但是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正在检查哪个按钮被点击了，如果点击了button-save按钮-它会检查上面的字段的值。如果有超过30个符号-它将显示错误消息。我需要先淡入它，展示一段时间，然后再淡出。这就是问题所在，它不会淡出，我不知道为什么。

- Dazvolt

---

请同时发布您的 HTML。 - Lal krishnan S L

你要我发布这个问题的完整代码吗？它很长，可以吗？ - Dazvolt

只需发布 .specific-block 元素。 - tbleckert

Answer 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/

- tbleckert

---

它也不起作用...嗯，看来我需要mootools。 - Dazvolt

只是想指出一下，对于那些通过谷歌找到@tbleckert的答案的人，complete是指在fadeOut完成时运行的函数。 - gordon613

Answer 2

只需这样做：

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

- Amit Joki

Answer 3

尝试在这里使用.dequeue()：

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

- Felix

Answer 4

您可以在.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();

- Jai