+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: callback do $( selector ).hover( function ); --> czy taki istnieje? (/thread-callback-do-selector-hover-function-czy-taki-istnieje)
callback do $( selector ).hover( function ); --> czy taki istnieje? - Arnimarl - 19-06-2014
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.
RE: callback do $( selector ).hover( function ); --> czy taki istnieje? - Kartofelek - 20-06-2014
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 - dzialamy2) 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.
RE: callback do $( selector ).hover( function ); --> czy taki istnieje? - Arnimarl - 21-06-2014
(20-06-2014, 03:59)Kartofelek napisał(a): 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
To jest tylko przykład. Tutaj http://jqapi.com/#p=animated-selector i tutaj http://jqapi.com/#p=hasClass sobie poczytaj więcejKod:if ($(this).hasClass(....)) .....ma przypisana klasę itp
...
if (!$(this).is(':animated')) {...nie jest animowany - dzialamy
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!
