Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] kolejka animacji diva
Forum PHP.pl > Forum > Po stronie przeglądarki
dopelganger
cześć
mam animację .diva (obrót o 360 stopni), i chciałbym po zakończeniu obrotu dodać kolejny ruch/animację tego samego .diva - o 180 stopni - żeby się powtarzała, czyli bez stopu po zakończeniu.

Kolejka animacji:
1. obrót 360
2. kołyska 180 - repeat

Prosze o pomoc.

  1. $(document).ready(function() {
  2.  
  3. function obrot() {
  4.  
  5. $('.div').animate({ borderSpacing: 360 }, {
  6. step: function(now,fx) {
  7. $(this).css('-webkit-transform','rotate('+now+'deg)');
  8. $(this).css('-moz-transform','rotate('+now+'deg)');
  9. $(this).css('transform','rotate('+now+'deg)');
  10. },
  11. duration:'slow'
  12. },'linear');
  13.  
  14. }
  15.  
  16. obrot();
  17.  
  18. });
trueblue
W pierwszej animacji callback na drugą animację, w drugiej animacji callback na samą siebie.
dopelganger
Cytat(trueblue @ 20.05.2016, 11:03:46 ) *
W pierwszej animacji callback na drugą animację, w drugiej animacji callback na samą siebie.

a mógłbyś mi podać sam schemat?

próbuje tak, ale testowy alert nie pokazuje się :/

  1. $( ".div" ).animate({
  2. borderSpacing: 360 }, {
  3. step: function(now,fx) {
  4. $(this).css('-webkit-transform','rotate('+now+'deg)');
  5. $(this).css('-moz-transform','rotate('+now+'deg)');
  6. $(this).css('transform','rotate('+now+'deg)');
  7. },
  8. duration:'slow'
  9. },'linear', function() {
  10. alert('test');
  11. });
trueblue
Sprawdź dokumentację - gdzie jest używany step i w jakiej postaci wywołania animate.
LowiczakPL
W poście pytającym jak to zrobić odpowiedziałeś sobie na pytanie

Kolejka animacji:
1. obrót 360
2. kołyska 180 - repeat

Jeśli masz pojęcie jak zrobić obrót i masz pojęcie jak zrobić kołyskę bo zakładam że masz to czy nie wystarczy 2 umieścić pod 1 ?

Na pewno ja bym tak zrobił
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.