0

ページの下部にくっつく div コンテナがあります。マウスが div の外に出ると、3 秒後に div が沈むようにします。マウスが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);
    }
});
4

1 に答える 1

0

setTimeout を使用するのではなく、必要なアニメーションの前に null アニメーションをスタックすることに成功しました。

例えば、

 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

于 2012-02-15T21:05:13.473 に答える