jquery動畫問題

我使用.animate（）創建「簡單」動畫菜單來放大用戶懸停的菜單項。這幾乎是正確的，但如果用戶快速移動光標，它會做一些奇怪的事情。加上元素不總是同時動畫。jquery動畫問題

顯示它的最簡單方法是使用以下鏈接。

或

<head> 
<script src="jquery-ui/js/jquery-1.4.2.min.js"></script> 
<script> 
$(document).ready(function(){ 

$("#test1").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px" }, 100) 
    } 
); 

$("#test2").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-21px" }, 100) 
    $(".test").animate({ top:"-21px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 

$("#test3").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-63px" }, 100) 
    $(".test").animate({ top:"-63px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 

$("#test4").hover(function() { 
    $(this).animate({ width:"599px",left:"0px", height:"168px", top:"-84px" }, 100) 
    $(".test").animate({ top:"-84px" }, 100) 
    }, 
    function() { 
    $(this).animate({ width:"246px",left:"9px", height:"84px", top:"0px" }, 100) 
    $(".test").animate({ top:"0px" }, 100) 
    } 
); 



}); 

</script> 
<style type="text/css"> 
    .container { 
     width:599px; background-color:#000;padding:0px; height:336px; overflow-y:hidden; 
    } 

    .test { 
     width:246px; background-color:#039; left:9px; top:0px; position:relative; height:84px; 
    } 
</style> 
</head> 

<body> 

    <div class="container"> 
     <div id="test1" class="test"> 
     test 
     </div> 
     <div id="test2" class="test"> 
      test 
     </div> 
     <div id="test3" class="test"> 
      test 
     </div> 
     <div id="test4" class="test"> 
      test 
     </div> 
    </div> 

</body>

任何想法？

由於

來源

2010-10-01 Tom

鏈接到生動的例子是偉大的，但**總是**也包括相關的代碼在你的實際問題。外部鏈接可以消失，重命名等，理想情況下，人們不應該遵循鏈接來回答你的問題。 – 2010-10-01 16:09:26

'mouseover'反覆觸發*，你可能更喜歡'mouseenter'（特別是當你使用'mouseleave'作爲另一半時）。（實際上，最近版本的jQuery有一個快捷方式來連接'mouseenter' /'mouseleave'對：['hover']（http://api.jquery.com/hover/）。）但這不是完整的答案。 – 2010-10-01 16:17:11

這裏是我的解決方案： http://jsfiddle.net/azLMc/

我添加了一個clearQueue（）調用每個鼠標離開（）函數。這將停止mouseover動畫，並立即執行mouseleave動畫。沒有它，鼠標懸停動畫將繼續運行，並且如果鼠標在完成前離開該區域，它將不會註冊它需要運行鼠標動畫。

之後，當鼠標快速離開文檔時，第一個DIV仍然卡住。所以我在.container DIV中添加了一個mouseleave（）函數，將第一個DIV返回到正常大小，並進行「重置」。

來源

2010-10-01 16:25:32

或者：

1）保留高度不變或

2.）具有懸停觸發單獨的偏移DIV顯示/隱藏

時的高度變化在頂部元素下方的任何位置，可能會移動，將另一個元素放在鼠標下，導致它觸發擴展/收縮，但由於您的轉換時間而延遲，並且在循環發生的時間內，另一個元素將e在光標下進入或離開焦點。

來源

2010-10-01 16:12:11 FatherStorm

+1我認爲這比'mouseneter'更重要。我嘗試了一個編輯，甚至投入了「停止」，幫助了一些但還不夠。 – 2010-10-01 16:15:39

jquery動畫問題

回答

相關問題