Jquery toggleClass проблема - PullRequest
Новая
       27

Jquery toggleClass проблема

1 голос
/ 09 мая 2011

, пожалуйста, помогите мне с моим меню Jquery toggleClass.

Это работает правильно, только если вы удерживаете кнопку более 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>

Ответы [ 2 ]

1 голос
/ 09 мая 2011

Отличное решение, голландец. Простое решение этой проблемы - остановить очередь 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/

1 голос
/ 09 мая 2011

Я не совсем уверен, почему исчезновение вызывает у вас эти проблемы, но я вижу две проблемы с вашим кодом.

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() ( 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);
});
...