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.
精彩评论