很多情況 Jquery 中 尤其在 鼠標經過的時候會不停的 顯示隱藏 html元素。 導致來回隱藏、顯示
. 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){ //********問題點在這裡，這裡沒有判斷是否處於動畫
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
正確的寫法應該是下面這樣的
. 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
if(!$(".panel").is(":animated")){ //問題點在這裡，這裡有判斷是否處於動畫
$(".panel").slideToggle("slow");
}
});
});
</script>
或者在滑動之前停止動畫隊列即可。
. 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).stop().slideToggle("slow");//stop() 函數停止動畫隊列。
});
});
</script>