jQuery在鼠标悬停时停止动画 [英] Jquery stop animation on mouseover

问题描述

从 http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/，它应该会给出一个不错的旧twitter样式通知.

A bit of JQuery taken from http://briancray.com/2009/05/06/twitter-style-alert-jquery-cs-php/ which should give a nice old-twitter style notification.

如何编辑下面的代码以阻止div悬停在鼠标悬停位置上?

How do I edit the code below to stop the div hiding on a mouseover?

更新:鼠标悬停完成后，我仍然希望div向上滑动.

$(function () {
    var $alert = $('#alert');
    if($alert.length) {
        var alerttimer = window.setTimeout(function () {
            $alert.trigger('click');
        }, 5000);       
        $alert.animate({height: $alert.css('line-height') || '50px'}, 200).click(function () {
            window.clearTimeout(alerttimer);
            $alert.animate({height: '0'}, 200);
        });
    }
});

推荐答案

如果我理解正确(我可能不太了解)，则需要这样的东西:

If I'm understanding correctly (which I'm probably not), you want something like this:

var alerttimer, alertBox = $('#alert');
function resetTimeout() {
        if (alerttimer) {
                clearTimeout(alerttimer);
        }
        alerttimer = setTimeout(function() {
                alertBox.trigger('click');
        }, 5000);
}
$(function () {
        if(alertBox.length) {
                resetTimeout();
                alertBox.animate({ height: alertBox.css('line-height') || '50px' }, 200).click(function () {
                        window.clearTimeout(alerttimer);
                        alertBox.animate({ height: '0px' }, 200);
                }).mouseover(function () {
                        clearTimeout(alerttimer);
                }).mouseout(function () {
                        resetTimeout();
                });
        }
});

请务必注意，以上内容未经测试.

It's important to note that the above is very much untested.

这篇关于jQuery在鼠标悬停时停止动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！