jQuery fadeIn CSS класс

Question

Я пытаюсь создать простой CSS-класс fadeIn () для определенных объектов, имеющих класс «button».Я хочу fadeIn класса "hoverbutton" при наведении курсора, а затем fadeOut, когда их мышь покидает элемент.

Я нашел это в вопросах.Казалось, что это работает хорошо, пока я не заметил, что когда я быстро наведу курсор на несколько кнопок, некоторые застряли в классе «hoverbutton».Не знаю, как это исправить.Любые предложения были бы хорошими.

$('.button').hover(function(){
    $(this).addClass('hoverbutton', 200);
}, function(){
    $(this).removeClass('hoverbutton', 200);
});

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

stop () вызывал тот же результат.класс зависания все еще застревает

$('.button').hover(function(){
  $(this).stop().addClass('hoverbutton', 200);
}, function(){
  $(this).stop().removeClass('hoverbutton', 200);
});

Answer 1

Проблема заключается в том, что jQueryUI использует свойство style для анимации, и если оно не завершается (поскольку зависание происходит до окончания наведения,) класс, к которому он анимируется, фактически не добавляетсяи поэтому не может быть удален при наведении.

Чтобы исправить это, нам нужно сделать две вещи при наведении:

• остановить addClass()animation
• удалить любой временный стиль, созданный addClass() animation

Примерно так.

$('.button').hover(function() {
    $(this)
        .addClass('hoverbutton', 200);
}, function() {
    $(this).stop()
        .attr("style", "")
        .removeClass('hoverbutton', 200);
});

Вот пример: http://jsfiddle.net/RBTT8/

Answer 2

Попробуйте с помощью CSS добавить -

    ex)--styles take 0.5s to appear        transition: all 0.5s ease-in-out;

к элементу, который вам нужен, чтобы перейти в

ссылку перехода w3schools: http://www.w3schools.com/css/css3_transitions.asp

Answer 3

Альтернативным подходом для достижения того же эффекта будет использование CSS3 Transitions , поддерживаемых во всех , кроме Internet Explorer (до версии 10).

Вот пример: http://jsfiddle.net/3yr8G/

Answer 4

Ознакомьтесь с документацией для stop () . Вы бы добавили его к вашему звонку так:

$('.button').hover(function(){
  $(this).stop().addClass('hoverbutton', 200);
}, function(){
  $(this).stop().removeClass('hoverbutton', 200);
});

Answer 5

Попробуйте остановить очередь анимации:

$('.button').hover(function(){
    $(this).stop().addClass('hoverbutton', 200);
}, function(){
    $(this).stop().removeClass('hoverbutton', 200);
});