jQuery - Animation efekti

jQuery animate()metoda

jQuery metoda animate() koristi se za kreiranje prilagođenih animacija. Metoda animate() obično se koristi za animiranje numeričkih CSS svojstava, na primjer: width, height, margin, padding, opacity, top, left, itd., ali ne i ne-numerička svojstva kao što su: color ili background-color, jer se oni me mogu animirati pomoću osnovnih jQuery funkcija.


Sintaksa

Osnovna sintaksa jQuery metode animate() može se napisati kao: 

$(selector).animate({ properties }, duration, callback);

Parametri metode animate() imaju sljedeća značenja:

  • Parametar traženih svojstava definiše CSS svojstva koja se animiraju.
  • Opcijski parametar određuje koliko dugo će se animacija izvoditi. Trajanja se mogu odrediti pomoću jednog od unaprijed definisanih stringova 'slow' ili 'fast', ili u broju milisekundi. Veće vrijednosti ukazuju na sporije animacije.
  • Opcijski parametar povratnog poziva je funkcija koju treba pozvati nakon završetka animacije.

Evo jednostavnog primjera jQuery metode animate() koja animira sliku sa prvobitnog položaja udesno za 300px klikom na dugme. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Animation efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    img{
        position: relative; /* Potrebno za pomjeranje elementa */
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>
</head>
<body>
    <button type="button">Pokreni animaciju</button>
    <p>
        <img src="/examples/images/mushroom.jpg" alt="Gljiva">
    </p>
</body>
</html>

Animirajte više svojstava odjednom

Takođe možete istovremeno animirati više svojstava elementa koristeći metodu animate(). Sva svojstva istovremeno su animirana bez ikakvog odgađanja. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery višestruke animacije</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #9d7ede;
        margin-top: 30px;
        border-style: solid; /* Potrebno za pomjeranje elementa */
        border-color: #6f40ce;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>
</head>
<body>
    <button type="button">Pokreni animaciju</button>
    <div class="box"></div>
</body>
</html>

Animirajte više svojstava jedno po jedno ili animacije u redu

Takođe možete pojedinačno animirati više svojstava elementa u redu koristeći jQuery-ovu funkciju chaining. O funkciji chaining ćete naučiti više u sljedećim lekcijama. Sljedeći primjer prikazuje jQuery animaciju, gdje će svaka animacija započeti nakon što se završi prethodna animacija na elementu. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Queued animacije</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #9d7ede;
        margin-top: 30px;
        border-style: solid; /* Potrebno za animiranje širine bordera */
        border-color: #6f40ce;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>
</head>
<body>
    <button type="button">Pokreni animaciju</button>
    <div class="box"></div>
</body>
</html>

Animiranje svojstva s relativnim vrijednostima

Takođe možete definisati relativne vrijednosti za animirana svojstva. Ako je vrijednost navedena s vodećim prefiksom += ili -=, tada se ciljana vrijednost izračunava dodavanjem ili oduzimanjem zadanog broja od trenutne vrijednosti svojstva. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery animacije sa relativnim vrijednostima</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .box{
        width: 100px;
        height: 100px;
        background: #9d7ede;
        margin-top: 30px;
        position: relative; /* Potrebno za pomjeranje elementa */
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>
</head>
<body>
    <button type="button">Pokreni animaciju</button>
    <p><strong>Napomena:</strong> Klikni na "Pokreni animaciju" da biste vidjeli kako primjer radi.</p>
    <div class="box"></div>
</body>
</html>

Animiranje svojstva s unaprijed definisanim vrijednostima

Pored numeričkih vrijednosti, svako svojstvo može uzeti string 'show', 'hide' i 'toggle'. Biće vrlo korisno u situaciji kada jednostavno želite animirati svojstvo sa njegove trenutne vrijednosti na početnu vrijednost i obrnuto. 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery animacija sa pre-definisanim vrijednostima</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    .box{
        width: 80%;
        height: 200px;
        background: #9d7ede;
        margin-top: 30px;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
</head>
<body>
    <button type="button">Toggle Animacija</button>
    <div class="box"></div>
</body>
</html>