JQuery, carane kita bisa ngleksanakake efek dinamis karo JQuery

Kanthi JQuery sampeyan bisa nggawe efek dinamis, animasi lan fades dening tumindak ing unsur saka kaca HTML.

Ing artikel iki, kita bakal weruh carane nggunakake cara JQuery beda kanggo nggawe animasi.

Singidaken lan nuduhake unsur HTML

cara hide() Lan show()

Metode hide() mung nyetel gaya inline display: none kanggo item sing dipilih. Kosok baline, cara show () mulihake sifat tampilan. 

Ayo ndeleng conto:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

Ing kasus sing sepisanan, paragraf didhelikake nalika sampeyan ngeklik tombol (hide-btn), ing kasus kapindho paragraf ditampilake nalika sampeyan ngeklik tombol (show-btn).

Sampeyan uga bisa nemtokake parameter durasi, kanggo animasi acara lan ndhelikake efek kanggo sawetara wektu.

Duration bisa ditemtokake nggunakake salah siji saka pra senardefiniku 'slow' o 'fast', utawa ing sawetara milliseconds, kanggo presisi luwih; nilai sing luwih dhuwur nuduhake animasi sing luwih alon.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".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);
    });
    
    // Show hidden paragraphs with different speeds
    $(".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>

String pradefinita 'fast' nuduhake durasi 200 milliseconds, nalika senar 'slow' nuduhake durasi 600 milidetik.

Kita bisa nemtokake fungsi saka callback dieksekusi sawise rampung metode show() utawa hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

Metode toggle

Metode jQuery toggle() nuduhake utawa ndhelikake item kanthi cara yen item kasebut pisanan ditampilake, bakal didhelikake; Kosok baline yen didhelikake, bakal ditampilake (praktis ngalih visibilitas).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

Kajaba iku, sampeyan bisa nemtokake parameter kasebut duration kanggo metode toggle(), kanthi cara kanggo nguripake transisi antarane cara sing katon lan didhelikake, kaya cara show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".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>

Kajaba iku, sampeyan uga bisa nemtokake fungsi saka callback kanggo metode toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

efek fade jQuery

cara fadeIn() e fadeOut()

Sampeyan bisa nggunakake cara jQuery fadeIn()e fadeOut() kanggo nuduhake utawa ndhelikake unsur HTML, kanthi bertahap nambah utawa nyuda opacity lan nggawe efek ilang.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

Kaya cara efek jQuery liyane, sampeyan bisa nemtokake durasi utawa parameter kacepetan kanggo metode fadeIn()e fadeOut(), kanggo ngontrol durasi fade. Duration bisa ditemtokake nggunakake salah siji saka pra senardefiniku 'slow' o 'fast', utawa ing sawetara milidetik; nilai sing luwih dhuwur nuduhake animasi sing luwih alon.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".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);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".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>

efek saka cara fadeIn() / fadeOut() Iku padha karo show() / hide(), nanging ora kaya cara show() / hide(), mantan mung nguripake opacity saka unsur target lan ora animate ukurane.

Sampeyan uga bisa nemtokake fungsi saka callback kanggo mbukak sawise cara rampung fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

Metodo fadeToggle()

Metode jQuery fadeToggle() nampilake utawa ndhelikake unsur sing dipilih kanthi ngowahi opacity supaya yen unsur kasebut pisanan ditampilake, unsur kasebut bakal ilang; yen didhelikake, iku bakal fade metu (i.e. mateni efek fade).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

Sampeyan uga bisa nemtokake parameter umur kanggo metode kasebut fadeToggle() minangka kanggo cara fadeIn() / fadeOut(), kanggo ngontrol durasi utawa kacepetan animasi fade.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".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>

Cara fadeToggle () uga nduweni kemampuan kanggo nemtokake fungsi callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

Metodo fadeTo()

Metode jQuery fadeTo() iku padha karo cara fadeIn(), nanging ora kaya cara fadeIn(), metode fadeTo() ngidini sampeyan nyampur unsur nganti tingkat opacity tartamtu.

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

Parameter sing dibutuhake opacity nemtokake opacity final saka unsur target kang bisa dadi nomer antarane 0 lan 1. Parameter duration o speed uga dibutuhake kanggo cara iki sing nemtokake durasi fade animasi.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

Efek gulung

cara slideUp() e slideDown()

Metode jQuery slideUp() e slideDown() digunakake kanggo ndhelikake utawa nuduhake unsur HTML kanthi nyuda utawa nambah dhuwure (yaiku nggulung munggah utawa mudhun).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

Kaya cara efek jQuery liyane, sampeyan bisa nemtokake parameter durasi utawa kacepetan kanggo metode kasebut slideUp() e slideDown() kanggo ngontrol durasi animasi geser. Duration bisa ditemtokake nggunakake salah siji saka pra senardefiniku 'slow' o 'fast', utawa ing sawetara milidetik; nilai sing luwih dhuwur nuduhake animasi sing luwih alon.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".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);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".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>

Sampeyan uga bisa nemtokake fungsi callback kanggo dieksekusi sawise cara rampung slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

Metodo slideToggle()

Metode jQuery slideToggle() nuduhake utawa ndhelikake unsur sing dipilih kanthi animasi dhuwure supaya yen unsur pisanan ditampilake, bakal digulung munggah; yen didhelikake, iku bakal nggulung mudhun, IE malih antarane cara slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

Kajaba iku, sampeyan bisa nemtokake parameter umur kanggo metode kasebut slideToggle() teka slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".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>

Kajaba iku, sampeyan uga bisa nemtokake fungsi callback kanggo metode kasebut slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

Efek animasi

Metodo animate()

Metode jQuery animate() digunakake kanggo nggawe animasi khusus. Metode animate() digunakake kanggo animasi sifat CSS numerik, kayata width, height, margin, padding, opacity, top, left lsp. nanging sifat non-numerik kaya color o background-color padha ora bisa animasi nggunakake fungsi jQuery dhasar.

Sintaks dhasar saka metode animate() iku ing ngisor iki:

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

Parameter metode animate() nduweni teges ing ngisor iki:

• Parameter properti sing dibutuhake defingrampungake properti CSS kanggo animasi.
• Parameter durasi opsional nemtokake suwene animasi bakal mlaku. Duration bisa ditemtokake nggunakake salah siji saka pra senardefiniku 'slow' o 'fast', utawa ing sawetara milidetik; nilai sing luwih dhuwur nuduhake animasi sing luwih alon.
• Parameter callback opsional minangka fungsi kanggo nelpon sawise animasi rampung.

Ing ngisor iki conto prasaja saka cara animate() kang animates gambar saka posisi asli ing sisih tengen dening 300 piksel ing klik tombol.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Sampeyan uga bisa nggawe animasi macem-macem sifat unsur bebarengan kanthi nggunakake metode kasebut animate(). Kabeh properti padha animasi bebarengan tanpa wektu tundha.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Sampeyan uga bisa animate sawetara sifat unsur siji-siji, ing antrian nggunakake fungsi concatenation jQuery.

Conto ing ngisor iki nuduhake animasi jQuery antrian utawa chained, ngendi saben animasi bakal miwiti yen animasi sadurungé ing unsur wis rampung. Kita bakal weruh fungsi concatenation ing artikel sabanjure.

<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>

Sampeyan uga bisa definish nilai relatif kanggo sifat animasi. Yen nilai kasebut kanthi prefiks += o -=, Nilai target diitung kanthi nambah utawa nyuda nomer kasebut saka nilai properti sing saiki.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Saliyane nilai numerik, saben properti bisa nampa strings 'show', 'hide' e 'toggle'. Bakal migunani banget ing kahanan sing mung pengin animasi properti saka nilai saiki menyang nilai awal lan kosok balene.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

Metodo stop()

Metode jQuery stop() digunakake kanggo ngendhegake animasi utawa efek jQuery saiki ing unsur sing dipilih sadurunge rampung.

Sintaks dhasar saka metode stop() jQuery bisa diwenehi karo:

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

Parameter ing sintaksis ing ndhuwur nduweni teges ing ngisor iki:

• Il parameter opsional boolean stopAll, nemtokake manawa kanggo mbusak animasi antrian utawa ora. Pradefiwengi iku false, Iki tegese mung animasi saiki bakal mandheg, sisa animasi ing antrian bakal dieksekusi mengko.
• Parameter boolean goToEnd opsional nemtokake manawa arep ngrampungake animasi saiki langsung. Pradefiwengi iku false.

Iki minangka conto prasaja sing nuduhake metode kasebut stop() ing tumindak nyata ngendi sampeyan bisa miwiti lan mungkasi animasi ing klik tombol.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

Punika conto liyane saka cara iki ngendi yen sampeyan klik tombol manehSlide Toggle” sawise miwiti animasi nanging sadurunge rampung, animasi bakal langsung diwiwiti ing arah ngelawan saka titik wiwitan sing disimpen.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Nalika nggawe efek hover animasi, salah siji saka masalah sing paling umum sampeyan bisa nemokke iku sawetara animasi antrian munggah, nalika sampeyan cepet nyeleh lan mbusak kursor mouse. Yagene, ing kahanan iki, mouseenter gli mouseleave acara dipecat kanthi cepet sadurunge animasi rampung. Kanggo ngindhari masalah iki lan nggawe efek hover sing apik lan lancar, sampeyan bisa nambah stop(true, true)menyang rantai metode, kaya mangkene:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

callback

Pernyataan JavaScript dieksekusi baris demi baris. Nanging, amarga efek jQuery njupuk sawetara wektu kanggo rampung, kode baris sabanjuré bisa mbukak nalika efek sadurungé isih mlaku. Kanggo nyegah kedadeyan kasebut, jQuery menehi fungsi callback kanggo saben cara efek.

Fungsi callback minangka fungsi sing mlaku sawise efek rampung. Fungsi callback diterusake minangka argumen kanggo metode efek, lan biasane katon minangka argumen metode pungkasan. Contone, sintaks dhasar saka cara efek jQuery slideToggle() kanthi fungsi callback sing bisa ditemtokake kaya ing ngisor iki:

$(selector).slideToggle(duration, callback);

Coba conto ing ngisor iki ing ngendi kita wis nyelehake pernyataan kasebut slideToggle()e alert()siji sandhinge. Yen sampeyan nyoba kode iki, tandha bakal katon sanalika sawise ngeklik tombol pilihan tanpa ngenteni efek toggle geser rampung.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

Lan iki versi modifikasi saka conto sadurunge ing ngendi kita nglebokake statement kasebut alert() nang fungsi callback kanggo cara slideToggle(). Yen sampeyan nyoba kode iki, pesen bebaya bakal katon yen efek toggle slide rampung.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Uga, sampeyan bisa defifungsi callback rampung kanggo cara efek jQuery liyane, kayata show(), hide(), fadeIn(), fadeOut(), animate()lsp.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

Yen sampeyan nyoba kode conto ing ndhuwur, sampeyan bakal entuk pesen peringatan sing padha kaping pindho saben item <h1> e <p>, sawise ngeklik tombol aktifake.

BlogInnovazione.it