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问题

回答

相关问题