Question

我这里有一个非常标准的问题。

我有一个错误div，

按下按钮时会显示错误消息，然后在（500 * n）ms（其中n =字母数）之后淡入div，div淡出。

我的问题发生在用户在div淡出之前再次按下按钮时。

当div仍然可见时，divs内容将使用新的错误消息

进行更新

在初始（500 * n）ms后，div淡出，然后立即淡入，并在另一个（500 * n）ms内可见。

我想要的是。

用户点击按钮
div内容已更新
div褪色
用户再次点击按钮
div立即淡出
内容已更新
div褪色。

我怎样才能做到这一点？

我目前的代码在

之下

function login_error(message){
        $('form').effect('shake', { times: 1 }, 50);
        $('#error').html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast');
}

Answer 1

这样的事情？

 $(function() {
    var counter = 0;
    var timeOut;
    $('button').click(function() {
        showdiv('clicked ' + counter++);
    });

    function showdiv(str) {
        clearTimeout(timeOut);
        $('div').fadeOut(function() {
            $(this).html(str).fadeIn(function() {
                timeOut = setTimeout(function() {
                    $('div').fadeOut();
                }, 100 * str.length);
            });
        })
    }
});

演示： http://www.jsfiddle.net/N88gv/

Answer 2

也许你停止动画并重置div

  $('#error').stop().hide().html(message).fadeIn('fast').delay(500*message.length).fadeOut('fast');

Answer 3

另一个解决方案是，点击按钮后你可以禁用它，并且使用div完成/动画完成后你可以重新启用它。

jquery：显示/隐藏div，计时

3 个答案: