开发者

Jquery stop animation on mouseover

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

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

UPDATE: I still want the div to slideup after the mouseover has finished.

$(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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜