jQuery switchClass - PullRequest
Новая
       24

jQuery switchClass

4 голосов
/ 14 июня 2010

Можно ли отменить переход switchClass?

Я бы хотел, чтобы элемент медленно получал класс A при наведении на него курсора и медленно терял его снова, как только мышь отошла. Однако эта функция выглядит сбойно, и вызов .stop(0,1), похоже, не помогает. На самом деле, кажется, что это сломано.

У меня есть живой пример здесь . Да, это страница 404, но это не важно. Навигация должна медленно набирать или терять класс, но она просто скачет. Сценарий можно найти здесь .

Возможен ли такой переход?

EDIT:

Вот код, который я использую: 

$('#navbar li:not(.current) a').hover(function() {
    $(this).parent()
        .stop(1,0)
        .addClass('current', 1000);
}, function () {
    $(this).parent()
        .stop(1,0)
        .removeClass('current', 1000);
});

Возможно, потому что изменение класса li не приводит к изменению стиля его дочерних элементов?

EDIT2:

Да, это «исправило» это. Настоящую ошибку теперь можно наблюдать во всей красе (замерзнуть в промежуточном состоянии).

Ответы [ 3 ]

1 голос
/ 15 июня 2010

Это самое близкое, что я сделал, чтобы заставить его работать:

Пример: http://jsfiddle.net/TUrvP/

Возможно, произошел некоторый перегиб, и вы можетеиспользовать селектор :animated, хотя сначала у меня были проблемы.

Может не стоить усилий ...

HTML 

<div id='myElement' class='blue'>content</div>

CSS 

div {
    width: 100px;
    height: 100px;
}

.blue {
    background: blue;
    position:relative;
    left: 20px;
}
.myClass {
    background:red;
    margin-top: 50px;
}

jQuery 

var animating = false;
var interval;
$('#myElement').hover(
    function() {
        var $th = $(this);
        if(!animating && !interval) {
            $th.clearQueue();
            animating = true;
            $th.addClass('myClass',500,function() {animating=false;});
        }
    },
    function() {
            var $th = $(this);
            if(interval) return false;
            if(animating) {
                interval = setInterval(function() {
                                            if(!animating) {
                                                $th.clearQueue();
                                                animating = true;
                                                $th.removeClass('myClass',500, function(){animating = false;});
                                                clearInterval(interval);
                                                interval = null;
                                            }},50)
            } else {
                $th.clearQueue();
                $th.removeClass('myClass',500, function(){animating = false;});
            }
        }
);
0 голосов
/ 14 июня 2010

Похоже, вы ищете некую форму .animate функции jQuery.

$('#clickme').hover(function() { $('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. }); });

В противном случае переключение класса медленно не имеет большого смысла для меня

0 голосов
/ 14 июня 2010

Нет смысла медленно получать класс.Элемент либо имеет определенный класс, либо его нет, и CSS не предоставляет способа указать какое-то «частичное включение» в класс.

edit - @patrick указывает, чтоИнтерфейс jQuery действительно поддерживает это, по крайней мере, до некоторой степени.Функции управления классами принимают аргумент длительности, если вы устанавливаете эффекты.

...