jquery addclass/removeclass не всегда работает, когда установлена ​​«скорость» (события мыши)

Question

В классе CSS «employee_mouseover» я делаю цвет фона красным.

        $(".employee").bind("mouseenter", function() {
            $(this).addClass("employee_mouseover");
        });
        $(".employee").bind("mouseleave", function() {
            $(this).removeClass("employee_mouseover");
        });

Это работает нормально.

Но когда я устанавливаю скорость, чтобы он выглядел более красиво, элемент остается красным, когда я быстро нажимаю mouseenter+mouseleave;

    $(".employee").bind("mouseenter", function() {
        $(this).addClass("employee_mouseover", "fast");
    });
    $(".employee").bind("mouseleave", function() {
        $(this).removeClass("employee_mouseover", "fast");
    });

Это не сработает, если только я не буду очень медленно входить и выходить из элемента.

Есть лучший способ сделать это?

Заранее спасибо.

Answer 1

Это можно сделать, но вам нужно установить Плагин jquery ColorAnimate.Затем вы можете использовать приведенный ниже код, чтобы медленно менять цвет:

$(".employee").bind("mouseenter", function() {
  $(this).animate({backgroundColor: "#bbccff"}, "slow");

});
$(".employee").bind("mouseleave", function() {
  $(this).animate({backgroundColor: "white"}, "slow");
});

Answer 2

из Документация по пользовательскому интерфейсу jQuery:

Ядро эффектов пользовательского интерфейса jQuery расширяет API базового класса, позволяя осуществлять анимацию между двумя разными классами.Следующие методы изменены.Теперь они принимают три дополнительных параметра:скорость, замедление (необязательно) и обратный вызов.

Таким образом, @Thomas, должно быть, включил на свою страницу библиотеки пользовательского интерфейса jQuery и jQuery, включив параметры скорости и обратного вызова для addClass и RemoveClass.

Answer 3

Вы используете неправильное событие.Вы хотите:

$(".employee").hover(function() {
 $(this).addClass("employee_mouseover");
}, function() {
 $(this).removeClass("employee_mouseover");
});

И при добавлении или удалении класса нет аргумента скорости.

Answer 4

Да, сделайте это в CSS!

.employee:hover{background:pink;}

Также, для addClass не задан параметр скорости, скорость существует только для эффектов.

Answer 5

Для RemoveClass есть параметр продолжительности (http://docs.jquery.com/UI/Effects/removeClass), но он не работает в FF.Что-то не так с моим кодом?Я новичок в JQuery.Сейчас я собираюсь попробовать функцию анимации.

Здесь я пытаюсь использовать привязки, а затем выделять местоположение привязки назначения при нажатии на привязку.Вот мой HTML-код –

<ul>
                <li><a href="#caricatures">Caricatures</a></li>
                <li><a href="#sketches">Sketches</a></li>
</ul>

Мой якорь пункта назначения -

<a href="#" id="caricatures"><h3>Caricatures</h3></a>

Здесь я могу изменить цвет фона.

Вот мой CSS -

<style>
            .spotlight{
                background-color:#fe5;
            }
</style>

Вот мой код JQuery –

<script>
    $('a[href$="caricatures"]').click(function(){
        $('a[id="caricatures"] h3').addClass("spotlight");
        $('a[id="caricatures"] h3').removeClass("spotlight",1000);
    });
    </script>

Answer 6

addClass предназначен для добавления классов CSS к элементам.Если вы хотите изменить какое-либо свойство CSS путем анимации, вам нужно сделать это явно, используя Последствия.

Ваш код:

$(this).addClass("employee_mouseover", "fast");

Добавим два класса, employee_mouseover и fast к this, что явно не то, что вам нужно.

Answer 7

Вот мой переход с jQuery:

$("#layoutControl .actionList").click(
    function(){
        $("#assetsContainer").fadeOut("fast",function(){
            $(this).removeClass("assetsGrid").addClass("assetsList");
            $("#iconList").attr("src", "/img/bam/listIcon.png");
            $("#iconGrid").attr("src", "/img/bam/gridIconDim.png");
            $(this).fadeIn("fast");
        });
    }
);

Answer 8

Даже если вы правильно включите JqueryUI, все они, похоже, не работают за пределами FF, когда вы используете параметр «длительность».Вызывает ошибки JS в IE.Я бы придерживался animate(), а это отстой.

http://jqueryui.com/docs/addClass/

http://jqueryui.com/docs/removeClass/

http://jqueryui.com/docs/switchClass/

http://jqueryui.com/docs/toggleClass/

В документации на сайте jqueryui об этом нет никаких упоминаний.

Answer 9

$(".employee").hover(function() {
    $(this).stop().animate({ backgroundColor: "#bbccff" }, "slow");
}, function() {
    $(this).stop().animate({ backgroundColor: "white" }, "slow");
});

Answer 10

Для достижения этого эффекта вы можете использовать переходы CSS3.

a:hover {
    color: red;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

a:link, a:visited {
    color: white;
    -webkit-transition: 1s color linear;
    -moz-transition: 1s color linear;
}

Answer 11

Кроме того, для addClass не задан параметр скорости, скорость существует только для эффектов.

Правильный.

Но, возможно, этот плагин может помочь:

анимация в классе