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

Question

В классе css "employee_mouseover" я делаю цвет bg красным.

        $(".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 UI :

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

Таким образом, @Thomas должен включить библиотеки JQuery и JQuery UI на своей странице, что позволило параметрам скорости и обратного вызова добавить addClass и removeClass.

Answer 2

Это можно сделать, но вам нужно установить плагин jQuery coloranimate . Тогда вы можете использовать код ниже, чтобы медленно изменить цвет:

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

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

Answer 3

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

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

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

Answer 4

Существует параметр длительности для 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 5

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

.employee:hover{background:pink;}

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

Answer 6

Вот мой переход с 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 7

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

Ваш код:

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

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

Answer 8

Вы можете использовать переходы 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 9

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

Answer 10

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

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

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

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

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

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