JQuery製作過多的動畫隊列

所以今天我想製作一個簡單的動畫，當我將鼠標懸停在按鈕上時會使按鈕增長，並且當我將鼠標從按鈕上移開時縮小。我嘗試使用這個簡單的JQuery代碼，但問題是如果我把動畫速度放慢，多次運行和關閉按鈕會創建多個動畫隊列，這將在我的鼠標已經離開按鈕後運行很久。JQuery製作過多的動畫隊列

如果鼠標離開按鈕，是否有辦法在收縮之後終止隊列？很明顯，我想在按鈕縮小之後殺死隊列，以使動畫生效。

相關HTML：

<div id="global-nav"> 
    <ul id="top-nav"> 
     <li class="nav-list"><a class="nav" href="http://images6.fanpop.com/image/photos/33400000/Cats-cats-33441067-1280-800.jpg">Link1</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://images4.fanpop.com/image/photos/16100000/-cats-16140154-1920-1080.jpg">Link2</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://learningfromdogs.files.wordpress.com/2010/09/cats-in-sink.jpg">Link3</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://25.media.tumblr.com/55b8c778e82b28aef27be5d6da8eaa7e/tumblr_meysfu2tM91qzv52ko1_500.jpg">Link4</a></li> 
    </ul> 
</div>

相關的JavaScript：

$(document).ready(function() { 
    $(".nav").mouseover(function() { 
     $(this).animate({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px' 
     },"slow"); 
    }).mouseout(function() { 
     $(this).animate({ 
      paddingTop:'3px', 
      paddingRight:'2px', 
      paddingBottom:'3px', 
      paddingLeft:'2px' 
     },"slow"); 
    }); 
});

的jsfiddle：http://jsfiddle.net/76tna/

請原諒對方CSS，貓文本和HTML。我指的是導航欄中的按鈕。（如果您好奇，這是爲了我妹妹。）

來源

2013-06-12 BitLion

我會在接下來的20分鐘，淋浴破不可用，對不起。 – BitLion

jQuery做了很多過量的東西XD –

TRY THIS FIDDLE

您需要使用stop功能，但如果你look at the docs你看，你要記得輸入true的功能來清除隊列，因爲它默認爲false。

$(document).ready(function() { 
    $(".nav").stop(true).mouseenter(function() { 
     $(this).animate({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px' 
     },"slow"); 
    }).mouseout(function() { 
     $(this).stop(true).animate({ 
      paddingTop:'3px', 
      paddingRight:'2px', 
      paddingBottom:'3px', 
      paddingLeft:'2px' 
     },"slow"); 
    }); 
});

來源

2013-06-12 05:03:37 Tom

謝謝！你幫助解決了困擾了我好幾天的問題......我甚至嘗試過使用條件循環;這裏一直都有完美的解決方案。 :) – BitLion

您需要.stop()當前動畫開始下一個之前，否則它會按照您目前的觀察排隊。

來源

2013-06-12 04:55:46

$(document).ready(function() { 
    $(".nav").mouseover(function() { 
     $(this).css({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px', 
      transition: 'padding 0.3s ease'    
    }); 
}).mouseout(function() { 
    $(this).css({ 
     paddingTop:'3px', 
     paddingRight:'2px', 
     paddingBottom:'3px', 
     paddingLeft:'2px', 
     transition: 'padding 0.3s ease' 
    }); 

}); 
});

來源

2013-06-12 05:19:32

你可以使用「stop（）」，也可以作爲我的答案。 –

JQuery製作過多的動畫隊列

回答

相關問題