IT TUTORIJALI | jQuery

jQuery - Fading efekti

jQuery metode fadeIn() i fadeOut()

Možete koristiti jQuery metode fadeIn() i fadeOut() za prikaz ili skrivanje HTML elemenata postupnim povećanjem ili smanjenjem njihovog prikazivanja.

<script>
$(document).ready(function(){
    // Blijeđenje prikazanih paragrafa
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Blijeđenje u skrivenim paragrafima
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PrimjerjQuery Fade-In i Fade-Out efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #DDA0DD;
    }
</style>
<script>
$(document).ready(function(){
    // Blijeđenje prikazanih paragrafa
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Blijeđenje u skrivenim paragrafima
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>
</head>
<body>
    <button type="button" class="out-btn">Efekat Fade Out na paragraf</button>
    <button type="button" class="in-btn">Efekat Fade In na paragraf</button>
    <p>Ovo je prvi paragraf.</p>
    <p>Ovo je drugi paragraf.</p>
</body>
</html>

Kao i druge metode jQuery efekata, po želji možete odrediti parametar trajanja ili brzine za metode fadeIn() i fadeOut() da biste kontrolisali koliko će dugo trajati animacija blijeđenja. 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(){
    // Blijeđenje prikazanih paragrafa različitim brzinama
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Blijeđenje u skrivenim paragrafima različitim brzinama
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Fade-In i Fade-Out efekta prikazivanja  različitim brzinama</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #DDA0DD;
    }
</style>
<script>
$(document).ready(function(){
    // Blijeđenje prikazanih paragrafa različitim brzinama
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Blijeđenje u skrivenim paragrafima različitim brzinama
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="out-btn">Fade Out paragraf</button>
    <button type="button" class="in-btn">Fade In paragraf</button>
    <p class="very-fast">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="normal">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="fast">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="slow">Ovaj paragraf će polako  nestajati.</p>
    <p class="very-slow">Ovaj paragraf će nestajati malom brzinom.</p>
</body>
</html>

Napomena!

Učinak metode fadeIn()/fadeOut() izgleda slično kao show()/hide(), ali za razliku od show()/hide() metode. Metoda fadeIn()/fadeOut() samo animira neprozirnost cilja elemente i ne animira njihove dimenzije.

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

<script>
$(document).ready(function(){
    // Prikazivanje poruku upozorenja nakon što nestaju paragrafi
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat fade-out je završen.");
        });
    });
    
    // Prikazivanje poruke upozorenja nakon blijeđenja u paragrafima
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat fade-in je završen.");
        });
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Fade-In i Fade-Out efekta s povratnim pozivnom</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #DDA0DD;
    }
</style>
<script>
$(document).ready(function(){
    // Prikazati poruku upozorenja nakon što nestaju paragrafi
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat fade-out je završen.");
        });
    });
    
    // Prikaži poruku upozorenja nakon blijeđenja u paragrafima
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Kod koji treba izvršiti
            alert("Efekat fade-in effect je završen.");
        });
    });
});
</script>
</head>
<body>
    <button type="button" class="out-btn">Fade Out paragraf</button>
    <button type="button" class="in-btn">Fade In paragraf</button>
    <p>Ovo je neki paragraf.</p>
</body>
</html>

jQuery fadeToggle() metoda

jQuery metoda fadeToggle() prikazuje ili skriva odabrane elemente animiranjem njihove neprozirnosti na takav način da će, ako je element u početku prikazan, on izblijediti.

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

Pogledajmo kako koristiti primjer u praksi:

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

Slično tome, možete odrediti parametar trajanja za metodu fadeToggle() poput fadeIn()/fadeOut() za kontrolu trajanja ili brzine animacije prebacivanja.

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

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Fade-Toggle efekta sa promjenom brzine</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        padding: 15px;
        background: #DDA0DD;
    }
</style>
<script>
$(document).ready(function(){
    // Promjena paragrafe različitim brzinama
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>
</head>
<body>
    <button type="button" class="toggle-btn">Fade prebacivanje paragrafa</button>
    <p class="very-fast">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="normal">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="fast">Ovaj paragraf će nestajati velikom brzinom.</p>
    <p class="slow">Ovaj paragraf će polako nestajati.</p>
    <p class="very-slow">Ovaj paragraf će polako nestajati.</p>
</body>
</html>

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

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

jQuery fadeTo() metoda

jQuery metoda fadeTo() slična je metodi .fadeIn(), ali za razliku od .fadeIn() metoda fadeTo() omogućava vam blijeđenje elemenata do određenog nivoa neprozirnosti.

$(selector).fadeTo(speed, opacity, callback);

Potrebni parametar neprozirnosti (eng. opacity) navodi konačnu neprozirnost ciljnih elemenata koji može biti broj između 0 i 1. Parametar trajanja ili brzine takođe je potreban za ovu metodu koja specifikuje trajanje prelaska na animaciju.

<script>
$(document).ready(function(){
    // Prikazivanje paragrafa s različitom neprozirnošću
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer jQuery Fade-To efekta</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    p{
        display: none;
        padding: 15px;
        background: #DDA0DD;
    }
</style>
<script>
$(document).ready(function(){
    // Prikazivanje paragrafa s različitom neprozirnošću
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>
</head>
<body>
    <button type="button" class="to-btn">Prikaži skrivene paragrafe</button>
    <p class="none">Ovo je prvi paragraf.</p>
    <p class="partial">Ovo je drugi paragraf.</p>
    <p class="complete">Ovo je trećiparagraf</p>
</body>
</html>