stop

stop

Stop je metoda jQuery.
Tato metoda zastaví probíhající script (animaci).

HTML:

<span id="zpet">
  Rychle zpět!
</span>
<div>
  <span id="text">
    Start?
  </span>
</div>

CSS:

#zpet {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}
div { 
  background: green; 
  width: 50px;
  height: 50px;
  margin-top: 5px; 
}

Script:

$(document).ready(function() {
  $('div').click(function() {
    $('#text').text("Jde...");  
    $('div').animate({
        width: '100px',
        height: '100px'
      }, {
        duration: 5000,
        easing: 'linear',
        complete: function() {
          $('#text').text("Konec!");  
        },
        queue: false       
          });
  }); 
  $('#zpet').click(function() {
    $('#text').text("Běží...");  
    $('div').stop()
      .animate({
        width: '50px',
        height: '50px', 
      }, 400, 'linear', function() {
        $('#text').text("Start?");    
      });
  });
});

Už je to trošku složitější.
Pozměnili jsme zápis, ale je to pořád to samé.
Pro přehlednost je v příkladu použita funkce text() s patřičným textem.
Metoda stop() je použita proto, abychom jsme mohli animaci zastavit a v tomto případě spustit jinou.

Prohlížeč:

Klikni na zelené políčko a zkus přerušit animaci tlačítkem Rychle zpět!

Parametr queue má hodnoty false a true. Zařazuje animaci do zásobníku.
Dále se dá pod queue použít ještě parametr step, kterým se dá zavolat funkce v průběhu animace, aniž dojde k přerušení animace.
Parametr complete zavolá funkci po skončení animace.