文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery toggleClass问题

问Jquery toggleClass问题
EN

Stack Overflow用户

提问于 2011-05-09 19:06:32

回答 2查看 1.8K关注 0票数 1

请帮我处理我的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>

jquery

mouseover

effect

toggleclass

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-05-09 19:50:56

不错的解决方案，达奇。此问题的一个简单解决方案是停止动画/fx队列。这意味着你可以通过切换类来继续设置动画。

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

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

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

票数 1

Stack Overflow用户

发布于 2011-05-09 19:15:11

我不确定fade为什么会给你带来这些问题，但我在你的代码中看到了两个问题。

1)主要问题是您的.hover函数格式不正确。

正确的格式是

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

2)在mouseover上切换一个类，在mouseout上切换另一个类。这将导致一些奇怪的结果。

有关详细说明，请参阅我的DEMO Without Fades。另外，请注意我的简化/简化的CSS。

您的代码应如下所示

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

更新

如果希望保留淡入淡出效果，请使用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);
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/5935999

复制

相似问题

问Jquery toggleClass问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery toggleClass问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery toggleClass问题
EN