我一直被一个小问题困扰,我想在单击其他 block 时淡入特定 block ,然后等待 2.5 秒并淡出特定 block 。这是我到目前为止的代码:
$('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 个,则会显示错误消息。我需要先淡入,显示一点,然后淡出。这就是问题所在,它不会淡出,我也不知道为什么。
最佳答案
您可以通过传入回调来等待淡入完成,如下所示:
$('element').fadeIn(function () {
// Fade in complete
});
淡入完成后,您可以继续延迟和淡出。
$('button.other-block').click(function () {
$(this)
.find('.specific-block')
.fadeIn(function () {
$(this).delay(2500).fadeOut(1600, complete);
});
});
如果不起作用,请切换到 Mootools ;)
关于Jquery 延迟() 和淡出(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22855263/