jQuery - Show i Hide efekti

jQuery show() i hide() metode

HTML elemente možete prikazati i sakriti pomoću jQuery metoda show() i hide(). Metoda hide() jednostavno postavlja prikaz ugrađenog stila. Suprotno tome, metoda show() vraća svojstva prikaza podudarnog skupa elemenata na ono što su u početku bili - block, inline ili inline-block—before - prije prikaza inline stila. Pogledajmo primjer: 

<script>
$(document).ready(function(){
    // Sakrij prikazane paragrafe
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Prikaži skrivene paragrafe
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Show Hide efekat</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Sakrij prikazane paragrafe
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Prikaži skrivene paragrafe
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Sakrij paragraf</button> 
    <button type="button" class="show-btn">Prikaži paragraf</button>
    <p>Ovo je paragraf.</p>
    <p>Ovo je neki drugi paragraf.</p>
</body>
</html>

Po želji možete odrediti parametar trajanja (koji se naziva i brzina (speed)) za stvaranje animiranog učinka jQuery skrivanja u određenom vremenskom periodu. Trajanja se mogu odrediti ili pomoću jednog od predefinisanih stringova 'slow' ili 'fast', ili za nekoliko milisekundi, radi veće preciznosti. Veće vrijednosti ukazuju na sporije animacije. 

<script>
$(document).ready(function(){
    // Sakrijte prikazane paragrafe različitim brzinama
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Prikažite skrivene paragrafe različitim brzinama
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Animated Show Hide efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Sakrijte prikazane paragrafe različitim brzinama
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Prikažite skrivene paragrafe različitim brzinama
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Sakrij paragrafe</button> 
    <button type="button" class="show-btn">Prikaži paragrafe</button>
    <p class="very-fast">Ovaj paragraf će se prikazati / sakriti velikom brzinom.</p>
    <p class="normal">Ovaj paragraf će se prikazati / sakriti sa zadanom brzinom.</p>
    <p class="fast">This paragraph will show/hide with fast speed.</p>
    <p class="slow">Ovaj paragraf prikazat će se / sakriti malom brzinom.</p>
    <p class="very-slow">Ovaj paragraf će se prikazati / sakriti vrlo malom brzinom.</p>
</body>
</html>

Takođe možete odrediti funkciju povratnog poziva koja će se izvršiti nakon završetka metode show() ili hide(). O funkciji povratnog poziva saznaćete u sljedećim lekcijama. 

<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon skrivanja paragrafa
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat sakrivanja je završen.");
        });
    });
    
    // Prikaži poruku upozorenja nakon prikazivanja paragrafa
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekt prikazivanja je završen.");
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Show Hide Effects sa Callback</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon skrivanja paragrafa
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat sakrivanja je završen.");
        });
    });
    
    // Prikaži poruku upozorenja nakon prikazivanja paragrafa
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekt prikazivanja je završen.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Sakrij paragraf</button> 
    <button type="button" class="show-btn">Prikaži pagragraf</button>
    <p>Ovo je paragraf</p>
</body>
</html>

jQuery toggle() metoda

jQuery metoda toggle() prikazuje ili skriva elemente na takav način da će, ako je element početno prikazan, biti skriven, a ako je skriven, prikazaće se (tj. prebacuje vidljivost). 

<script>
$(document).ready(function(){
    // Toggles prikazivanje paragrafa
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Toggle efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Toggles prikazivanje paragrafa
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle paragrafi</button> 
    <p>Ovo je paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>

Slično tome, možete odrediti parametar trajanja za metodu toggle() kako biste je učinili animiranom poput metoda show() i hide(). 

<script>
$(document).ready(function(){
    // Toggles paragraf sa različitim brzinama prikaza
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Animated Toggle efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Toggles Toggles paragraf sa različitim brzinama prikaza
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle paragrafi</button>
    <p class="very-fast">Ovaj paragraf će se prikazati / sakriti velikom brzinom.</p>
    <p class="normal">Ovaj paragraf će se prikazati / sakriti sa zadanom brzinom.</p>
    <p class="fast">Ovaj paragraf će se prikazati / sakriti velikom brzinom.</p>
    <p class="slow">Ovaj paragraf prikazat će se / sakriti malom brzinom.</p>
    <p class="very-slow">Ovaj paragraf će se prikazati / sakriti vrlo malom brzinom.</p>
</body>
</html>

Slično tome, možete odrediti i funkciju povratnog poziva za metodu toggle(). 

<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon prebacivanja paragrafa
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Kod koji treba izvršiti
            alert("Toggle efekat je završen.");
        });
    });
});
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Toggle efekta sa povratin pozivom</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #F0E68C;
    }
</style>
<script>
$(document).ready(function(){
    // Prikaži poruku upozorenja nakon prebacivanja paragrafa
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Kod koji treba izvršiti
            alert("Toggle efekat je završen.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Toggle paragraf</button> 
    <p>Ovo je paragraf.</p>
</body>
</html>