IT TUTORIJALI | jQuery

jQuery - Sliding efekti

jQuery metode slideUp() i slideDown()

jQuery metode slideUp() i slideDown() koriste se za skrivanje ili prikazivanje HTML elemenata postupnim smanjivanjem ili povećanjem njihove visine (tj. pomicanjem prema gore ili dole).

<script>
$(document).ready(function(){
    // Klizanje prikazanih paragrafa prema gore
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Klizanje prikazanih paragrafa prema dole
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Slide-Up i Slide-Down efekat</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Klizanje prikazanih paragrafa prema gore
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Klizanje prikazanih paragrafa prema dole
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>
</head>
<body>
    <button type="button" class="up-btn">Povuci gore paragraf</button> 
    <button type="button" class="down-btn">Povuci dole paragraf</button>
    <p>Ovo je prvi paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>

Kao i druge jQuery metode efekata, po želji možete odrediti parametar trajanja ili brzine za metode slideUp() i slideDown() da biste kontrolisali koliko će dugo trajati animacija slajda. Trajanja se mogu odrediti ili pomoću jednog od unaprijed definisanih stringova 'slow' ili 'fast', ili u broju milisekundi. Veće vrijednosti ukazuju na sporije animacije.

<script>
$(document).ready(function(){
    // Klizanje prikazanih paragrafa prema gore različitim brzinama
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Klizanje prikazanih paragrafa prema dole različitim brzinama
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Slide-Up i Slide-Down efekta s različitim brzinama</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Klizanje prikazanih paragrafa prema gore različitim brzinama
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Klizanje prikazanih paragrafa prema dole različitim brzinama
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="up-btn">Podigni paragrafe</button> 
    <button type="button" class="down-btn">Spusti paragrafe</button>
    <p class="very-fast">Ovaj paragraf će nestati vrlo velikom brzinom.</p>
    <p class="normal">Ovaj paragraf će nestati vrlo velikom brzinom.</p>
    <p class="fast">Ovaj paragraf će nestati vrlo velikom brzinom.</p>
    <p class="slow">Ovaj paragraf će polako nestati.</p>
    <p class="very-slow">Ovaj paragraf će polako nestati.</p>
</body>
</html>

Možete odrediti i funkciju povratnog poziva koja će se izvršiti nakon dovršetka metode slideUp() ili slideDown(). O funkciji povratnog poziva saznatćete u narednim lekcijama.

<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon klizanja paragrafa prema gore
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-up je završen.");
        });
    });
    
    // Prikaži poruku upozorenja nakon klizanja paragrafa prema dole
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-down je završen.");
        });
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Slide-Up i Slide-Down efekta sa povratnim pozivom</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon klizanja paragrafa prema gore
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-up je završen..");
        });
    });
    
    // Prikaži poruku upozorenja nakon klizanja paragrafa prema dole
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-down je završen.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="up-btn">Podigni paragraf</button> 
    <button type="button" class="down-btn">Spusti paragraf</button>
    <p>Ovo je paragraf.</p>
</body>
</html>

jQuery slideToggle() metoda

jQuery metoda slideToggle() prikazuje ili skriva odabrane elemente animiranjem njihove visine na takav način da će, ako je element početno prikazan, biti pomaknut prema gore, a ako je skriven, pomaknut će se prema dole, tj. prebacuje se između metoda slideUp() i slideDown().

<script>
$(document).ready(function(){
    // Uključuje / isključuje prikaz paragrafa klizanjem
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Slide-Toggle efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Uključuje / isključuje prikaz paragrafa klizanjem
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Slide Toggle paragrafa</button> 
    <p>Ovo je prvi paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>

Slično tome, možete odrediti parametar trajanja za metodu slideToggle() poput slideUp() i slideDown() za kontrolu brzine animacije prebacivanja slide-a.

<script>
$(document).ready(function(){
    // Prikazivanje paragrafa različitim brzinama
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PrimjerjQuery Slide-Toggle efekta s različitim brzinama prikazivanja</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Prikazivanje paragrafa različitim brzinama
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Prikazivanje paragrafa</button>
    <p class="very-fast">Ovaj paragraf klizaće gore velikom brzinom.</p>
    <p class="normal">Ovaj paragraf klizaće gore velikom brzinom.</p>
    <p class="fast">Ovaj paragraf klizaće gore velikom brzinom.</p>
    <p class="slow">Ovaj paragraf klizaće gore malom brzinom.</p>
    <p class="very-slow">Ovaj paragraf klizaće gore malom brzinom.</p>
</body>
</html>

Slično tome, možete odrediti i funkciju povratnog poziva za metodu slideToggle(), kao što je prikazano u sljedećem primjeru:

<script>
$(document).ready(function(){
    // Prikazivanje poruke upozorenja nakon prebacivanja paragrafa klizanjem
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-toggle je završen.");
        });
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Slide-Toggle efekta s povratnim pozivom</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #B0C4DE;
    }
</style>
<script>
$(document).ready(function(){
    // Prikazivanje poruke upozorenja nakon prebacivanja paragrafa klizanjem
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Kod koji treba izvršiti
            alert("Efekat slide-toggle je završen.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Prikaži paragraf</button>
    <p>Ovo je paragraf.</p>
</body>
</html>