jQuery - Stop animacije


jQuery stop() metoda

jQuery metoda stop() koristi se za zaustavljanje jQuery animacija ili efekata koji se trenutno izvode na odabranim elementima prije nego što ih dovrši. Osnovna sintaksa jQuery metode stop() može se napisati kao:

$(selector).stop(stopAll, goToEnd);

Parametri u sintaksi imaju sljedeća značenja:

  • Neobavezni logički parametar stopAll određuje hoće li se ukloniti animacija u redu ili ne. Zadana vrijednost je false, što znači da će se zaustaviti samo trenutna animacija, a zatim će se pokrenuti ostale animacije u redu čekanja.
  • Neobavezni goToEnd logički parametar određuje treba li odmah dovršiti trenutnu animaciju. Zadana vrijednost je false.

Evo jednostavnog primjera koji pokazuje jQuery metodu stop() u stvarnoj akciji u kojoj možete pokrenuti i zaustaviti animaciju klikom na dugme.

<script>
$(document).ready(function(){
    // Pokreni animaciju
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Prestanak izvodjenja animacije
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Pokretanje animacije u suprotnom smjeru
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Vrati na početno
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Stop trenutno pokrenute animacije</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    img{
        position: relative; /* Potrebno za premještanje elementa */
    }
</style>
<script>
$(document).ready(function(){
    // Pokreni animaciju
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });

    // Prestanak izvodjenja animacije
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Pokretanje animacije u suprotnom smjeru
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });

    // Vrati na početno
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>
</head>
<body>
    <button type="button" class="start-btn">Start</button>
    <button type="button" class="stop-btn">Stop</button>
    <button type="button" class="back-btn">Nazad</button>
    <button type="button" class="reset-btn">Reset</button>
    <p>
        <img src="/examples/images/mushroom.jpg" alt="Mushroom">
    </p>
</body>
</html>                                        

Evo još jednog primjera stop() metode u kojoj će, ako nakon pokretanja animacije ponovno kliknete dugme "Prebaci klizanjem" prije nego što je završena animacija započeti kretanje u suprotnom smjeru do početne točke.

<script>
$(document).ready(function(){
    // Zaustavi i vrati animaciju u početno stanje
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Zaustavljanje trenutne animacije i reprodukcija sljedeće animacije u redu čekanja</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .box{
        width: 300px;
        height: 200px;
        background: #9d7ede;
        margin-top: 20px;
        border: 3px solid #6f40ce;
    }
</style>
<script>
$(document).ready(function(){
    // Zaustavi i vrati animaciju u početno stanje
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>
</head>
<body>
    <p><strong>Napomena:</strong> Kliknite dugme "Slide Toggle" 
    da biste pokrenuli animaciju, a zatim kliknite ponovo prije završetka 
    animacije da biste razumjeli ovaj primjer.</p>
    <button type="button" class="toggle-btn">Slide Toggle</button>
    <div class="box"></div>
</body>
</html>                                        


Kreiranje Smooth Hover efekta

Dok stvarate animirani efekt lebdenja (Smooth Hover), jedan od uobičajenih problema s kojim se možete suočiti je višestruke animacije u redu, kada brzo postavite i uklonite kursor miša. U ovoj se situaciji događaji unosa miša ili miša pokreću brzo prije završetka animacije. Da biste izbjegli ovaj problem i stvorili lijep i gladak efekt lebdenja, možete dodati stop(true, true), ovako:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Smooth Hover efekat</title>
<style>
    .box{
        width: 500px;
        height: 300px;
        border: 5px solid #000;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>
</head>
<body>
    <div class="box">
        <img src="/examples/images/sky.jpg" alt="Cloudy Sky">
    </div>
    <p><strong>Napomena:</strong> Postavite i uklonite kursor miša preko slike da biste vidjeli učinak.</p>
</body>
</html>