Как прервать обработчик Ховера? - PullRequest
Новая
       42

Как прервать обработчик Ховера?

2 голосов
/ 11 июля 2011

У меня следующая ситуация:

У меня есть объект, давайте назовем его «Кнопка».Когда вы наводите мышку на кнопку, она заставляет другой объект «Информация» скользить вниз.Конечно, когда ваша мышь покидает кнопку, информация скользит вверх и исчезает.Но у Info есть ссылка, и пользователь может захотеть щелкнуть по ней.Я могу задержать слайд Info вверх, но не могу остановить его после того, как достигну Info.

Это код, который я использую. 

$("#button").hover(function(){
    $("#info").slideDown("fast");
}, function(){ //the handlerOut
    $("#info").delay(1000).slideUp("fast");
});

Как мне сказать Баттону неИнформация по слайду после того, как я наведу на него курсор?

Ответы [ 3 ]

2 голосов
/ 11 июля 2011

Вы можете использовать stop(), чтобы остановить любую текущую анимацию в очереди. Обратите внимание, что stop() останавливает любую текущую анимацию, где бы она ни находилась, поэтому в этом случае нам нужно остановить анимацию, и показывают элемент.

(Кроме того, прежде чем решить проблему поведения, вы, возможно, уже захотите использовать stop() для предотвращения отскакивающих эффектов, если пользователь очень быстро вводит и выключает кнопку): 

$("#button").hover(function(){
    $("#info").stop(true,true).slideDown("fast");
}, function(){ //the handlerOut
    $("#info").stop(true,true).delay(1000).slideUp("fast");
});

Затем, чтобы получить желаемое поведение, нам нужно добавить обработчик наведения на #info, который останавливает текущую анимацию, а затем либо отображает, либо скрывает элемент информации, в зависимости от ситуации. Поскольку у нас уже есть обработчик, который делает это, вы можете просто добавить селектор #info к вызову hover: 

$("#button, #info").hover(function(){
    $("#info").stop(true,true).slideDown("fast");
}, function(){ //the handlerOut
    $("#info").stop(true,true).delay(1000).slideUp("fast");
});

Вот рабочий jsfiddle

0 голосов
/ 11 июля 2011

http://jsfiddle.net/

<a href="javasctipt:" class="hoverNav" target="info">
    show info
</a>

<div id="info" class="hoverNavDescription">
Iam info text
</div>






 var curVisible="";
jQuery(function(){
    jQuery('.hoverNav').bind('mouseover',function(){
         var elm=jQuery(this),
             targetName=elm.attr('target')
             ;
        curVisible=targetName;
        jQuery('#'+targetName).slideDown();
        jQuery(window).bind('click',handleMouseOut)

    });

function handleMouseOut(e)
{
    if($(e.target).attr('id')!=curVisible)
    {
        jQuery('#'+curVisible).slideUp();
        curVisible="";
        jQuery(window).unbind(handleMouseOut);
    }
}

}); 

.hoverNavDescription
{
    display:none;
    background-color:red;
    height:100px;
    width:100px;
}
0 голосов
/ 11 июля 2011

Обычное решение этой проблемы состоит в том, чтобы установить задержку до того, как связанный элемент также будет скрыт, и, если пользователь наводит курсор на этот элемент во время задержки, полностью отменить скрытие.в http://jsfiddle.net/gaby/VjLM2/

...