我一直被一个小问题困扰,我想在点击其他块时淡入特定块,然后等待 2.5 秒并淡出特定块。这是我到目前为止的代码:

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

淡入很好,延迟功能也很好。但是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 个符号 - 它将显示错误消息。我需要先淡入,显示一点,然后淡出。这就是问题所在,它不会淡出,我不知道为什么。

最佳答案

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

$('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/

关于Jquery delay() 和fadeOut(),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22855263/

10-14 07:15