callback do $( selector ).hover( function ); --> czy taki istnieje?

[Arnimarl]

Witam. Czy istnieje callback do hover od jQuery?

Mam na mysli to, ze potrzebuje funkcji, ktora uruchamia animacje po ukonczeniu pierwszej, ale tylko w momencie, gdy ta pierwsza zostala ukonczona.


... mowiac lopatologicznie: chcialbym, aby po najechaniu na dany obrazek o rozmiarze 'x' kursorem, zaczal sie on powiekszac do rozmiaru dajmy: '3x' , trwalo to powiedzmy 3s i DOPIERO, kiedy osiagnie on rozmiar '3x', ma zostac uruchomiona kolejna animacja(animacja_2).
Jesli natomiast zdejmiemy kursor z obrazka przed tym, jak osiagnie on rozmiar '3x' -> przyjmijmy, ze zdejmujemu kursor po 2.5s i obecnie obrazek powiekszyl sie do '2.5x' -> animacja_2 ma sie nie uruchmic, a nasz obrazek ma zaczac pomniejszczac sie z '2.5x' do 'x' w czasie 2.5 sekundy.
Niby proste, apotrzebuje Waszej pomocy.

[Kartofelek]

mozesz to spokojnie zrobić na 2 sposoby:
1) gorszy -> mouseover i po prostu w funkcji zwrotnej dać prosty test czy dany gościu ma przypisaną klasę lub cos na wzor

Kod:

if ($(this).hasClass(....)) .....ma przypisana klasę itp
...
if (!$(this).is(':animated')) {...nie jest animowany - dzialamy

To jest tylko przykład. Tutaj http://jqapi.com/#p=animated-selector i tutaj http://jqapi.com/#p=hasClass sobie poczytaj więcej

2) lepszy - całą animację przerzucasz na css. Danemu elementowi po najechaniu włączasz tylko klasę która zmienia mu wygląd. Potem za pomocą CSS transition zmieniasz właściwości. W jquery podpinasz zdarzenie które gdy te przejścia animacji się zakończą coś tam zrobi - np odblokuje możliwość najazdu na ten element.
http://stackoverflow.com/questions/2794148/css3-transition-events

Kod:

.element {
width:200px;
....
transition:2.5s;
}
.element.active {
width:400px;
}

Kod:

$('.element').mouseover(function() {
   $(this).addClass('active');
});
$('.element').mouseover(function() {
   $(this).removeClass('active');
});
$('.element').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
$(this).removeClass('active');
});

To też tylko przepis.

[Arnimarl]

mozesz to spokojnie zrobić na 2 sposoby:
1) gorszy -> mouseover i po prostu w funkcji zwrotnej dać prosty test czy dany gościu ma przypisaną klasę lub cos na wzor

Kod:

if ($(this).hasClass(....)) .....ma przypisana klasę itp
...
if (!$(this).is(':animated')) {...nie jest animowany - dzialamy

To jest tylko przykład. Tutaj http://jqapi.com/#p=animated-selector i tutaj http://jqapi.com/#p=hasClass sobie poczytaj więcej

2) lepszy - całą animację przerzucasz na css. Danemu elementowi po najechaniu włączasz tylko klasę która zmienia mu wygląd. Potem za pomocą CSS transition zmieniasz właściwości. W jquery podpinasz zdarzenie które gdy te przejścia animacji się zakończą coś tam zrobi - np odblokuje możliwość najazdu na ten element.
http://stackoverflow.com/questions/2794148/css3-transition-events

Kod:

.element {
width:200px;
....
transition:2.5s;
}
.element.active {
width:400px;
}

Kod:

$('.element').mouseover(function() {
   $(this).addClass('active');
});
$('.element').mouseover(function() {
   $(this).removeClass('active');
});
$('.element').one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
$(this).removeClass('active');
});

To też tylko przepis.

Dzieki za wskazowki!