Kulesi sihloko sizobona ukuthi zisetshenziswa kanjani izindlela ezihlukile ze-JQuery zokukhiqiza izithombe ezinyakazayo.
hide() Futhi show()Indlela yokufihla () imane imise isitayela emgqeni display: none ngezinto ezikhethiwe. Ngokuphambene, indlela ye-show() ibuyisela izici zokubonisa.
Ake sibone isibonelo:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Esimweni sokuqala isigaba siyafihlwa uma uchofoza inkinobho (hide-btn), esimweni sesibili isigaba siyaboniswa uma uchofoza inkinobho (show-btn).
Ungaphinda ucacise ipharamitha yobude besikhathi, ukuze ugqwayize umbukiso futhi ufihle umphumela isikhathi esithile.
Ubude besikhathi bungacaciswa kusetshenziswa iyunithi yezinhlamvu eyodwa yangaphambilidefinite 'slow' o 'fast', noma ngenani lama-millisecond, ukuze kube nokunemba okukhulu; amanani aphezulu akhombisa ukugqwayiza okunensa.
<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>I-string predefii-rivet 'fast' ikhombisa ubude besikhathi obungama-millisecond angu-200, kuyilapho iyunithi yezinhlamvu 'slow' ikhombisa ubude besikhathi obungama-millisecond angu-600.
Singacacisa umsebenzi we callback ezokwenziwa ngemva kokuqedwa kwendlela show() noma 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>Indlela ye-jQuery toggle() bonisa noma ufihle izinto ngendlela yokuthi uma into iboniswa ekuqaleni, izofihlwa; ngokuphambene uma ifihliwe, izovezwa (cishe iguqule ukubonakala kwayo).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Ngokufanayo, ungacacisa ipharamitha duration okwendlela toggle(), ngendlela yokuthi kuphile uguquko phakathi kokubonakalayo nokufihliwe, njengezindlela 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>Ngokufanayo, ungaphinda ucacise umsebenzi we callback okwendlela 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>fadeIn() e fadeOut()Ungasebenzisa izindlela ze-jQuery fadeIn()e fadeOut() ukukhombisa noma ukufihla izakhi ze-HTML, kancane kancane ukwandisa noma ukunciphisa ukufiphala kwazo nokudala umphumela ophelayo.
<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>Njengezinye izindlela zemiphumela ye-jQuery, ungakhetha ukukhetha ubude besikhathi noma ipharamitha yesivinini sezindlela fadeIn()e fadeOut(), ukuze ulawule ubude besikhathi sokufiphala. Ubude besikhathi bungacaciswa kusetshenziswa iyunithi yezinhlamvu eyodwa yangaphambilidefinite 'slow' o 'fast', noma ngenani lama-millisecond; amanani aphezulu akhombisa ukugqwayiza okunensa.
<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>umphumela wezindlela fadeIn() / fadeOut() Kuyafana ne show() / hide(), kodwa ngokungafani nezindlela show() / hide(), eyokuqala iphila kuphela i-opacity yezinto eziqondiwe futhi ayiphili usayizi wazo.
Futhi ungacacisa umsebenzi we callback ukugijima ngemva kokuqedwa kwezindlela 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>fadeToggle()Indlela ye-jQuery fadeToggle() ibonisa noma ifihle izakhi ezikhethiwe ngokugqwayiza ukukhanya kwazo kangangokuthi uma isici siboniswa ekuqaleni, sizofiphala; uma ibifihliwe, izofiphala (okungukuthi ukushintsha umphumela wokufiphala).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Ungaphinda ucacise ipharamitha yempilo yonke yendlela fadeToggle() mayelana nezindlela fadeIn() / fadeOut(), ukulawula ubude besikhathi noma isivinini sokugqwayiza kwe-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>Indlela ye-fadeToggle() nayo inamandla okucacisa umsebenzi 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>fadeTo()Indlela ye-jQuery fadeTo() iyafana nendlela fadeIn(), kodwa ngokungafani nendlela fadeIn(), indlela fadeTo() ikuvumela ukuthi uhlanganise ama-elementi kuze kufike ezingeni elithile lokungafihli.
$(selector).fadeTo(speed, opacity, callback);Ipharamitha edingekayo opacity icacisa ukufiphala kokugcina kwezinto eziqondiwe okungaba inombolo ephakathi kuka-0 no-1. Ipharamitha duration o speed iyadingeka futhi kule ndlela ecacisa ubude besikhathi sokufiphala kopopayi.
<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>slideUp() e slideDown()Indlela ye-jQuery slideUp() e slideDown() asetshenziselwa ukufihla noma ukukhombisa izakhi ze-HTML ngokunciphisa kancane kancane noma ukwandisa ubude bazo (okungukuthi ukuskrola phezulu noma phansi).
<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>Njengezinye izindlela zemiphumela ye-jQuery, ungakhetha ukucacisa ubude besikhathi noma ipharamitha yesivinini sezindlela slideUp() e slideDown() ukuze ulawule ubude besikhathi sokugqwayiza kwamaslayidi. Ubude besikhathi bungacaciswa kusetshenziswa iyunithi yezinhlamvu eyodwa yangaphambilidefinite 'slow' o 'fast', noma ngenani lama-millisecond; amanani aphezulu akhombisa ukugqwayiza okunensa.
<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>Ungaphinda ucacise umsebenzi wokuphinda ushayele ozowusebenzisa ngemva kokuqedwa kwendlela 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>slideToggle()Indlela ye-jQuery slideToggle() khombisa noma ufihle izakhi ezikhethiwe ngokugqwayiza ubude bazo ukuze uma isici siboniswa ekuqaleni, sizoskrolwa phezulu; uma ifihliwe, izoskrolwa phansi, okungukuthi ama-toggles phakathi kwezindlela slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Ngokufanayo, ungacacisa ipharamitha yempilo yonke yendlela slideToggle() woza 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>Ngokufanayo, ungaphinda ucacise umsebenzi wokuphinda ushayele indlela 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>animate()Indlela ye-jQuery animate() isetshenziselwa ukudala ukugqwayiza kwangokwezifiso. Indlela animate() isetshenziselwa ukugqwayiza izakhiwo ze-CSS zezinombolo, njenge width, height, margin, padding, opacity, top, left njll. kodwa izakhiwo ezingezona izinombolo ezifana color o background-color azikwazi ukugqwayiza kusetshenziswa ukusebenza okuyisisekelo kwe-jQuery.
I-syntax eyisisekelo yendlela animate() yilokhu okulandelayo:
$(selector).animate({ properties }, duration, callback);Imingcele yendlela animate() zinezincazelo ezilandelayo:
'slow' o 'fast', noma ngenani lama-millisecond; amanani aphezulu akhombisa ukugqwayiza okunensa.Ngezansi isibonelo esilula sendlela animate() okwenza isithombe siphile sisuka endaweni yaso siye kwesokudla ngamaphikseli angu-300 ngokuchofoza inkinobho.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Ungaphinda uphilise izakhiwo eziningi ze-elementi ndawonye ngesikhathi esisodwa usebenzisa indlela animate(). Zonke izakhiwo zenziwe opopayi ngesikhathi esifanayo ngaphandle kokubambezeleka.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Ungaphinda uphilise izakhiwo eziningi ze-elementi ngayinye ngayinye, kulayini usebenzisa umsebenzi wokuhlanganisa we-jQuery.
Isibonelo esilandelayo sibonisa ukugqwayiza okulayini noma okuboshiwe kwe-jQuery, lapho ukugqwayiza ngakunye kuzoqala uma ukugqwayiza kwangaphambilini ku-elementi sekuqediwe. Sizobona umsebenzi wokuhlanganisa esihlokweni esizayo.
<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>Kungenzeka futhi definish amanani ahlobene wezakhiwo ezigqwayizayo. Uma inani licaciswe ngesiqalo += o -=, inani eliqondiwe libalwa ngokwengeza noma ngokukhipha inombolo eshiwo enanini lamanje lesakhiwo.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ngokungeziwe kumanani ezinombolo, isakhiwo ngasinye singamukela amayunithi ezinhlamvu 'show', 'hide' e 'toggle'. Kuyoba usizo kakhulu esimweni lapho ufuna nje ukugqwayiza impahla ukusuka enanini layo lamanje kuye kunaluni layo lokuqala futhi ngokuphambene nalokho.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Indlela ye-jQuery stop() isetshenziselwa ukumisa ukugqwayiza okwamanje kwe-jQuery noma imithelela kuma-elementi akhethiwe ngaphambi kokuqedwa.
I-syntax eyisisekelo yendlela stop() I-jQuery inganikezwa nge:
$(selector).stop(stopAll, goToEnd);Amapharamitha ku-syntax engenhla anezincazelo ezilandelayo:
false, lokhu kusho ukuthi ukugqwayiza kwamanje kuphela okuzomiswa, okunye ukugqwayiza kulayini kuzokwenziwa kamuva.false.Nasi isibonelo esilula esibonisa indlela stop() esenzweni sangempela lapho ungaqala khona futhi umise ukugqwayiza ngokuchofoza inkinobho.
<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>Nasi esinye isibonelo sale ndlela lapho uma uchofoza inkinobho futhiSlide Toggle” ngemva kokuqala ukugqwayiza kodwa ngaphambi kokuthi kuqedwe, ukugqwayiza kuzoqala ngokushesha ngakolunye uhlangothi ukusuka endaweni yokuqala elondoloziwe.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Ngenkathi udala umphumela wokuhambisa opopayi, enye yezinkinga ezivame kakhulu ongahlangabezana nazo ukugqwayiza okuningi okukleliswe phezulu, lapho ubeka ngokushesha futhi ususa ikhesa yegundane. Kungani, kulesi simo, mouseenter gli mouseleave imicimbi ixoshwa ngokushesha ngaphambi kokuba ukugqwayiza kuqedwe. Ukuze ugweme le nkinga futhi udale umphumela we-hover omuhle futhi obushelelezi, ungangeza stop(true, true)ku-chain chain, kanje:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Izitatimende ze-JavaScript zenziwa umugqa ngomugqa. Nokho, njengoba umphumela we-jQuery uthatha isikhathi ukuqeda, ikhodi yomugqa olandelayo ingase isebenze ngenkathi umphumela wangaphambilini usasebenza. Ukuze uvimbele lokhu ukuthi kungenzeki, i-jQuery inikeza umsebenzi wokuphinda ushayele wendlela ngayinye yomthelela.
Umsebenzi wokushayela emuva umsebenzi osebenza uma umphumela usuqedile. Umsebenzi we-callback udluliswa njenge-agumenti ezindleleni zomphumela, futhi ngokuvamile zivela njenge-agumenti yokugcina. Isibonelo, i-syntax eyisisekelo yendlela yomphumela we-jQuery slideToggle() ngomsebenzi wokushayela emuva ongacaciswa kanje:
$(selector).slideToggle(duration, callback);Cabangela isibonelo esilandelayo lapho sibeke khona izitatimende slideToggle()e alert()omunye eceleni komunye. Uma uzama le khodi, isixwayiso sizovela ngokushesha ngemva kokuchofoza inkinobho yokuguqula ngaphandle kokulinda umphumela wokuguqula isilayidi uqedele.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Futhi nansi inguqulo eguquliwe yesibonelo sangaphambilini lapho sifake khona isitatimende alert() ngaphakathi komsebenzi wokuphinda ushayele indlela slideToggle(). Uma uzama le khodi, umlayezo oyisixwayiso uzovela uma umphumela wokuguqula isilayidi usuqediwe.
<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>Ngokufanayo, ungakwazi defiqedela imisebenzi yokuphinda ushayele ezinye izindlela zomphumela we-jQuery, njenge show(), hide(), fadeIn(), fadeOut(), animate(), njll.
<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>Uma uzama isampula yekhodi engenhla, uzothola umlayezo ofanayo oyisixwayiso kabili kanye ngento ngayinye <h1> e <p>, ngemva kokuchofoza inkinobho yokwenza kusebenze.
BlogInnovazione.it
I-Coveware ye-Veeam izoqhubeka nokuhlinzeka ngezinsizakalo zokuphendula izigameko zokuntshontshwa kwe-inthanethi. I-Coveware izohlinzeka ngama-forensics kanye nekhono lokulungisa…
Ukulungiswa okuqagelayo kuguqula umkhakha kawoyela negesi, ngendlela emisha nesebenzayo yokuphatha izitshalo.…
I-CMA yase-UK ikhiphe isexwayiso mayelana nokuziphatha kwe-Big Tech emakethe yezobunhloli bokwenziwa. Lapho…
Isinqumo esithi "Case Green", esakhiwe yi-European Union ukuze kuthuthukiswe ukusebenza kahle kwamandla ezakhiwo, siphothule inqubo yaso yomthetho ngokuthi...