прокрутка div с помощью jquery setTimeout и mouseenter & mouseleave - PullRequest
Новая
       27

прокрутка div с помощью jquery setTimeout и mouseenter & mouseleave

0 голосов
/ 16 февраля 2012

У меня есть контейнер div, который прикрепляется к нижней части страницы.Когда мышь выходит из div, я хочу, чтобы div опустился через 3 секунды.Когда мышь перемещается по div, я хочу, чтобы div поднялся в исходное положение.Проблема в том, что когда мышь очень быстро перемещается вверх и вниз от элемента div, элемент div продолжает двигаться вверх к верхней части страницы.

   var timer = null;
   var moving_distance = $("#scroller").height()-($(window).height()-$("#slideshow").height());
   $("#scroller").mouseenter(function(event){

    if(timer)
    {
     clearTimeout(timer);

         $("#scroller").animate({top:'-='+moving_distance},1000);

    }

}).mouseleave(function(event){

    if(!timer){

    timer = setTimeout(function(){

        $("#scroller").animate({top:'+='+moving_distance},1000);
    },3000);
    }
});

1 Ответ

0 голосов
/ 16 февраля 2012

Мне удалось наложить ноль-анимацию перед нужной анимацией, а не использовать setTimeout.

Например, 

 var moving_distance = $("#scroller").height()-($(window).height()-$("#slideshow").height()); 
 var firstEnter = true;
 $("#scroller").mouseenter(function(event){ 
    if (firstEnter)
        firstEnter = false;
    else {
        $("#scroller").stop();
        $("#scroller").animate({top:'+=0', 3000);
        $('#scroller').animate({top:'-='+$('#scroller').top()), 1000);
    }
}).mouseleave(function(event){ 
    $('#scroller').stop();
    $("#scroller").animate({top:'+=0', 3000);
    $('#scroller').animate({top:'+='+moving_distance), 1000);
});

Я думаю, из вашего описания, что вы хотитеdiv, чтобы стоять на месте, пока мышь не будет перемещена в div.Затем, когда мышь уходит в первый раз, она должна утонуть.После этого, когда мышь снова возвращается, она должна вернуться в исходное положение.Я думаю, что это будет близко к этому.

HTH

...