jQuery fadeIn CSS klasa

Question

Próbuję zrobić proste klasy fadeIn() CSS na niektórych obiektach, które mają klasę "przycisk". Chcę zaniknąć w klasie "hoverbutton" po najechaniu kursorem, a następnie fadeOut, gdy mysz opuści przedmiot.

Znalazłem to w pytaniach. Wydawało się, że działa dobrze, dopóki nie zauważyłem, gdy najechałem na wiele przycisków, niektóre z nich utknęły w klasie "hoverbutton". Nie mam pojęcia, jak to naprawić. Wszelkie sugestie byłyby świetne.

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

wydaje się utknąć kiedy unoszą się nad jednym i szybko przeskoczyć do innego elementu z tej klasy przed zanikaniem na pierwszym jest kompletny.

stop() przyniosły taki sam wynik. Klasa unosić nadal utknie

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

Answer 1

Problemem jest to, ponieważ jQueryUI wykorzystuje właściwość style zrobić animację, a jeśli tak nie jest kompletna (ponieważ występuje hover przed hover w kończy) klasa, do której jest animowana, nie jest dodawana, więc nie można jej usunąć za pomocą dymka.

Aby rozwiązać ten problem, musimy zrobić dwie rzeczy na najechania-out:

• zatrzymać animację addClass()
• usunięcia wszelkich tymczasowych styl stworzony przez addClass() animacji

Podobnie jak ..

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

Oto przykład: http://jsfiddle.net/RBTT8/

Answer 2

Spróbuj zatrzymać kolejkę animacji:

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

Answer 3

Zapoznaj się z dokumentacją stop(). Można by dodać go do wywołania tak:

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

Answer 4

Alternatywnym podejściem do osiągnięcia tego samego efektu byłoby użyć CSS3 Transitions, obsługiwanego we wszystkim wyjątkiem Internet Explorer (do wersji 10).

Oto przykład: http://jsfiddle.net/3yr8G/

Answer 5

Spróbuj użyć CSS ADD -

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

do elementu U Need zanikać w

w3schools związek przejściowy: http://www.w3schools.com/css/css3_transitions.asp