Animując obrazy w logo w gniazdie typu animacji. Potrzebuję tego, aby przestać ożywić, gdy dotrze do góry obrazu (i wyślij zwrotny, jeśli to możliwe).

Obecnie tak osiągam animację:

window.setInterval(function() {
    $('#title-1 img').animate({bottom : '-=60px'})
}, 5000);

Jakieś pomysły, w jaki sposób mogłbym zatrzymać, i wysłać zwrot pieniędzy?

0
Alexander 27 wrzesień 2011, 21:59

3 odpowiedzi

Najlepsza odpowiedź

Więc zakładam, że masz zdjęcie sprite zawierające wielokrotne logo, chcesz je ślizgać 5 sekund, aż dojdziesz do ostatniego, a następnie zadzwoń do połączenia zwrotnego?

var cnt = 6,
    $img = $('#title-1 img'),
    i = 0;
function animate_logo(cb) {
    if (i < cnt) {
        $('#title-1 img').animate({bottom : '-=60px'});
        i += 1;
        setTimeout(function () {animate_logo(cb)}, 5000);
    }
    else {
        cb();
    }
}();
0
Guard 27 wrzesień 2011, 18:14
var interval = window.setInterval(function() {
    $('#title-1 img').animate({bottom : '-=60px'},
          function(){
                if(`some stop point`) clearInterval(interval);
          }
    );
}, 5000);
0
Naftali aka Neal 27 wrzesień 2011, 18:11

Nie sugerowałbym korzystania z setinterval podczas radzenia sobie z animacje z powodu sposobu, w jaki nowsze przeglądarki wprowadzają zmiany w sposób pracy SetInterval i Settimeout, gdy karta nie jest aktywną kartą.

var $title1 = $("#title-1");
var $title1img = $title1.find('img');
function anim(){
  if ($title1.height() < parseInt($title1img.css("bottom"))) {
    setTimeout(function(){
      $title1img.animate({bottom : '-=60px'},anim);
    },5000);
  }
}
$title1img.animate({bottom : '-=60px'},anim);

Edytuj: Kolejny powód, aby nie używać setinterval do pożaru animacji wynika z reqeustanimationframe, która została wdrożona w 1,6 i usunięta w 1.6.3, która będzie więcej niż prawdopodobna została dodana w 1,7. Jeśli piszesz teraz kod, który będzie kompatybilny później, mniej konserwacja będziesz musiał zrobić później, jeśli będziesz wymagany do uaktualnienia.

Oto jsfiddle http://jsfiddle.net/Czunu/

Edytuj: Funkcja ...

function animColumn(title,img){
  function anim(){
    if (title.height() < parseInt(img.css("bottom")) {
      setTimeout(function(){
        img.animate({bottom : '-=60px'},anim);
      },5000);
    }
  }
  img.animate({bottom : '-=60px'},anim);
}
animColumn($("#title-1"),$("#title-1 img"));
animColumn($("#title-2"),$("#title-2 img"));
animColumn($("#title-3"),$("#title-3 img"));

http://jsfiddle.net/Czunu/1/

0
Kevin B 27 wrzesień 2011, 20:04