停止关闭div;如果将鼠标悬停在它上面

时间:2012-05-04 14:08:41

标签: jquery

如下图所示,如果用户将鼠标悬停在div上,那么如何暂停淡出div?如果没有悬停div,那么无论时间设置为什么都会淡出。?

下面是我正在使用的代码......用于fadein和fadeout:

 $("#success").fadeOut('slow');
 $("#success").fadeIn('slow');
 $("#success").fadeTo(5000, 1).fadeOut(2000);

我的div:

<div class="success"><a href="#" class="close">&times;</a>status message here...</div>

我试过这个:

if ($('#success').is(':hover')) { //dont close me and reset the time ...} 

结果: enter image description here

1 个答案:

答案 0 :(得分:2)

这样的东西? http://jsfiddle.net/krmNY/1/

JS

var $msg = $('#dvFadeMsg'); 
var timer = null; 

function StartFadeTimer(){
    timer = setTimeout(function(){
        $msg.fadeOut('slow');
    }, 1500); 
}

$('#dvFadeMsg').hover(function(){
    clearTimeout(timer); 
}, function(){
    StartFadeTimer(); 
});

$msg.fadeIn('slow');
StartFadeTimer();

HTML

<div id="dvFadeMsg">Fade me if no mouse</div>​