20-06-2014, 03:59
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ę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
To też tylko przepis.
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
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.