jQuery動畫建立

我有這個動畫設置在一個網站上。但是，當你的鼠標懸停和鼠標移出速度非常快時，即使停止播放動畫，動畫也會繼續播放（就像它在動畫中創建動畫一樣）。我真的不希望發生這種情況，但是當我把stop（）。show等......它實際上並沒有做我想做的事情，因爲它改變了div的位置（因爲我不允許動畫完成）。jQuery動畫建立

LINK：http://www.everybodywalks.com/main.php

$(document).ready(function() { 
     $('#commercialSlide').mouseenter(function() { 

      if ($('#commercialBox').is(":hidden")) 
       { 
       $('#commercialBox').show('slide', { direction: "down" }, 150); 
       $('#commercialLink').hide(); 
       $('#residentialLink').hide(); 
       } 
       return false; 
     }); 

     $('#commercialBox').mouseleave(function() { 

      if ($('#commercialBox').not(":hidden")) 
       { 
       $('#commercialBox').hide('slide', { direction: "down" }, 150); 
       $('#residentialLink').fadeIn(250); 
       $('#commercialLink').fadeIn(250); 
       } 
       return false; 
     }); 

    });

commercialBox是紅色框彈出了該鏈接。 commercialSlide是鏈接ID。 commercialLink是包含鏈接的div。我可能會鞏固最後兩個，但在這一點上，我只是想讓這個工作。

來源

2011-07-28 Hugo

你能提供你的HTML標記？ – Johnny5

鏈接添加到原始文章與停止（true，true），但是當你鼠標懸停，然後離開你的鼠標的div，它循環不同時間） – Hugo

您必須用stop()覆蓋動畫隊列。

更換

$('#commercialBox').show(..

與

$('#commercialBox').stop().show(

並更換

$('#commercialBox').hide(

與

$('#commercialBox').stop().hide(

更多閱讀：http://api.jquery.com/stop/

來源

2011-07-28 13:52:59 AlienWebguy

http://www.everybodywalks.com/main.php<--這是網頁 - 所以你們明白我的意思。 – Hugo

我也嘗試過，它會改變div動畫的位置，因爲我基本上在半途停止了動畫。 :( – Hugo

你應該使用：

.stop(true, true)

第一個參數將清除所有動畫從動畫隊列，而第二個將立即完成當前動畫。有關詳細說明，請參見.stop()。

來源

2011-07-28 13:53:33 kolufild

嘗試設置的「意圖」定時器，以防止菜單打開意外，這應該減輕多數問題：

var commercial_timer; 
    $('#commercialSlide').live('mouseenter',function() 
    { 

     // We create a slight delay so the menu only opens when the user holds the mouse over 
     // the button for a brief moment. Simply moving the cursor over and past the button 
     // should not open the menu 
     commercial_timer = setTimeout(function() 
     { 
       $('#commercialBox').show('slide', { direction: 'down' }, 150); 
       $('#commercialLink').hide(); 
       $('#residentialLink').hide(); 
     },200); 

    }); // End mouseenter listener 


    // Clear the mouseenter timeout and close the menu if it is open, when the user exits the menu 
    $('#commercialSlide, #commercialBox').live('mouseleave',function() 
    { 
     clearTimeout(commercial_timer); 
     if($('#commercialBox').is(':visible')) 
     { 
       $('#commercialBox').hide('slide', { direction: "down" }, 150); 
       $('#residentialLink').fadeIn(250); 
       $('#commercialLink').fadeIn(250); 
     } 
    });

來源

2011-07-28 15:28:51 AlienWebguy

jQuery動畫建立

回答

相關問題