Jquery toggleClass問題

請幫我用我的Jquery toggleClass菜單。Jquery toggleClass問題

只有在超過200ms的按鈕時才能正常工作，否則會失敗。

這是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> 
<style> 
.menu { width: 200px; padding: 5px; margin:10px 0;border:1px solid #FF0000;background: #FFFF00; color: #FF0000;display:block;} 
.menu_over { width: 200px; padding: 5px; margin:10px 0; border:1px solid #000000;background: #FF0000; color: #ffffff;display:block;} 
</style> 
</head> 
<body> 
<script> 
$(function() { 
    $("#menu_left a.menu").hover(
     function() { 
      $(this).toggleClass("menu_over", 200); 
     } 
    ), 
     function() { 
      $(this).toggleClass("menu", 200); 
     } 
}); 
</script> 
<div id="menu_left"> 
    <a href="#" class="menu">AFRICA</a> 
    <a href="#" class="menu">AMERICA</a> 
    <a href="#" class="menu">ANTARCTICA</a> 
    <a href="#" class="menu">ASIA</a> 
    <a href="#" class="menu">AUSTRALIA</a> 
    <a href="#" class="menu">EUROPE</a> 
</div> 
</body> 
</html>

來源

2011-05-09 Gabriel

很好的解決方案Dutchie

您的代碼應與此類似

$("#menu_left a.menu").hover(function() { 
    $(this).toggleClass("menu_over"); 
},function() { 
    $(this).toggleClass("menu_over"); 
});

UPDATE

。解決此問題的一個簡單方法是停止animation/fx隊列。這意味着您可以通過切換課程繼續進行動畫製作。

var toggle = function() { 
    $(this).stop(true, true).toggleClass("menu_over", 200); 
}; 

$("#menu_left a.menu").hover(toggle, toggle);

小提琴：http://jsfiddle.net/NBdR5/10/

來源

2011-05-09 11:50:56

WOW，這真的是我要找的，大約2天:) Thankx，Gary！ – Gabriel 2011-05-09 14:00:08

一個很好的解決方案，即使你偷了我的觀點！ :) +1 – Dutchie432 2011-05-09 14:24:24

我不知道確切原因淡出是給你的這些問題，但有兩個問題，我與你的代碼中看到。

1）主要問題是您的.hover函數格式錯誤。

的正確格式爲

$(item).hover(
    function(){}, //Actions on Mouseover 
    function(){} //Actions on Mouseout 
);

2）你在mouseover切換一個班級，並在mouseout切換不同的類。這將導致一些奇怪的結果。

查看我的DEMO Without Fades作進一步說明。另外，請注意我簡化/簡化的CSS。如果你想保持變淡，使用animate()（DEMO）

$("#menu_left a.menu").hover(function() { 
    $(this).stop().animate({ 
     'background-color': '#ff0000', 
     'color' : '#ffffff', 
     'border-color' : '#000000'  
    }, 200); 
},function() { 
    $(this).stop().animate({ 
     'background-color': '#ffff00', 
     'color' : '#ff0000', 
     'border-color' : '#ff0000'  
    }, 200); 
});

來源

2011-05-09 11:15:11 Dutchie432

但之一，我唯一需要的是靈界:) – Gabriel 2011-05-09 11:23:07

好了，然後看到更新。（http://jsfiddle.net/Jaybles/NBdR5/7/）。正確的做法是通過'animate（）'函數。 – Dutchie432 2011-05-09 11:27:41

太棒了，它的工作原理，也沒有JqueryUI。非常感謝！ – Gabriel 2011-05-09 11:37:30

Jquery toggleClass問題

回答

相關問題