Jquery切换类问题

发布于 2024-11-06 02:19:45 字数 1393 浏览 0 评论 0原文

请帮助我使用 Jquery 切换类菜单。

只有按住按钮超过 200 毫秒才能正常工作，否则会失败。

这是代码：

<!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>

原文

please help me with my Jquery toggleClass menu.

It works properly, only if you stay on button more than 200ms, otherwise it fails.

This is the code:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情绪失控 2024-11-13 02:19:45

很好的解决方案荷兰人。此问题的一个简单解决方案是停止动画/特效队列。这意味着您可以通过切换类继续制作动画。

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

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

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

Nice solution Dutchie. A simple solution to this problem would be to stop the animation/fx queue. It'll mean you can continue to animate by toggling class.

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

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

Fiddle: http://jsfiddle.net/NBdR5/10/

回复收藏 0 原文

蹲在坟头点根烟 2024-11-13 02:19:45

我不确定为什么淡入淡出会给你带来这些问题，但我发现你的代码有两个问题。

1）主要问题是您的 .hover 函数格式错误。

正确的格式是

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

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

请参阅我的没有淡入淡出的演示以获取更多说明。另外，请注意我减少/简化的 CSS。

您的代码应该类似于此

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

UPDATE

如果您想保留淡入淡出，请使用 animate() (演示)

$("#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);
});

I'm not sure exactly why the fade is giving you those problems, but there are two problems I see with your code.

1) The main problem is that your .hover function is malformed.

The correct format is

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

2) You're toggling one class on mouseover, and toggling a different class on mouseout. This is going to cause some odd results.

See my DEMO Without Fades for further illustration. Also, note my reduced/simplified CSS.

Your code should look similar to this

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

UPDATE

If you want to keep the fades, use 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);
});

回复收藏 0 原文

~没有更多了~