JQuery幻燈片功能不能正常工作

Question

那麼即時通訊製作一個下拉菜單，但有問題的下拉部分。它可以工作，如果在按鈕頂部一次，但有時它會變得瘋狂，如果我繼續往前走就會多次下去。 我的代碼...

<script> 
    $(document).ready(function() { 
    var par = $('#subitem'); 
    $(par).hide(); 
    $('#barbox').mouseover(function(a) { 
     $(par).slideToggle(300); 
     a.preventDefault(); 
    }); 
    $(par).mouseleave(function(a) { 
     $(par).slideToggle(300); 
    }); 
}); 
</script> 

你可以看到我的site問題，只是去了服務選項卡，然後用鼠標那裏鬼混。

Answer 1

動畫發瘋的原因是由於jQuery的動畫隊列。

你想要做的是什麼做的slideToggle事件像這樣前停止隊列：

<script> 
    $(document).ready(function() { 
    var par = $('#subitem'); 
    $(par).hide(); 
    $('#barbox').mouseover(function(a) { 
     $(par) 
.stop(true, true).slideToggle(300); 
     a.preventDefault(); 
    }); 
    $(par).mouseleave(function(a) { 
     $(par) 
.stop(true, true).slideToggle(300); 
    }); 
}); 
</script> 

退房此鏈接更多的信息：http://api.jquery.com/stop/

Answer 2

嘗試把所有事件在同一個函數像這樣：

$('#subitem').mouseenter(function(){ 
     $('#subitem').slideToggle(300); 
     a.preventDefault(); 
    }).mouseleave(function(){ 
     $('#subitem').slideToggle(300); 
    }); 

Answer 3

你應該先修復你的HTML。你在每張桌子上使用相同的ID。鏈接相同。 一個id是唯一的，所以你應該使用一個類來代替。