JQuery, singayenza njani impembelelo eguqukayo ngeJQuery

Nge-JQuery unokwenza iziphumo eziguquguqukayo, oopopayi kunye nokucima ngokusebenza kwizinto zephepha le-HTML.

Kweli nqaku siza kubona indlela yokusebenzisa iindlela ezahlukeneyo zeJQuery ukwenza oopopayi.

Fihla kwaye ubonise i-HTML element

tindlela hide() Kwaye show()

Indlela yokufihla () ibeka ngokulula isimbo emgceni display: none kwizinto ezikhethiweyo. Ngokuchaseneyo, indlela yokubonisa () ibuyisela iimpawu zokubonisa. 

Makhe sibone umzekelo:

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

Kwimeko yokuqala umhlathi uyafihlwa xa ucofa iqhosha (hide-btn) kwimeko yesibini umhlathi uyaboniswa xa ucofa iqhosha (show-btn).

Ungakhankanya kwakhona ipharamitha yobude, ukwenza umboniso kunye nokufihla isiphumo kangangexesha elithile.

Ubude bexesha bunokuchazwa kusetyenziswa omnye wemitya yangaphambilidefihayi 'slow' o 'fast', okanye kwinani leemilliseconds, ukwenzela ukuchaneka okukhulu; amaxabiso aphezulu abonisa oopopayi abacothayo.

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

Umtya ngaphambilidefiNita 'fast' ibonisa ubude be-200 milliseconds, ngelixa umtya 'slow' ibonisa ubude bexesha le-600 milliseconds.

Singachaza umsebenzi we callback iya kwenziwa emva kokugqitywa kwendlela show() okanye 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 yokuguqula

Indlela yejQuery toggle() bonisa okanye ufihle izinto ngendlela yokuba ukuba into leyo ibonisiwe ekuqaleni, iya kufihlwa; ngokuchaseneyo ukuba ifihliwe, iya kuboniswa (yenza iguqule ukubonakala kwayo).

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

Ngokufanayo, ungakhankanya iparameter duration yendlela toggle(), ngendlela yokuphilisa inguqu phakathi kokubonakalayo nokufihlakeleyo, njengeendlela 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, ungakhankanya umsebenzi we callback yendlela 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>

I-jQuery iyaphela iziphumo

tindlela fadeIn() e fadeOut()

Ungasebenzisa iindlela zejQuery fadeIn()e fadeOut() ukubonisa okanye ukufihla izinto ze-HTML, ngokuthe ngcembe ukwandisa okanye ukunciphisa ukukhanya kwazo kunye nokudala isiphumo sokuphela.

<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 iindlela zeziphumo ze-jQuery, ungakhetha ubude bexesha okanye isantya separamitha kwiindlela fadeIn()e fadeOut(), ukuze kulawulwe ixesha lokuphelelwa. Ubude bexesha bunokuchazwa kusetyenziswa omnye wemitya yangaphambilidefihayi 'slow' o 'fast', okanye kwinani lemizuzwana; amaxabiso aphezulu abonisa oopopayi abacothayo.

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

isiphumo seendlela fadeIn() / fadeOut() Iyafana ne show() / hide(), kodwa ngokungafaniyo neendlela show() / hide(), eyokuqala yenza kuphela i-opacity yezinto ekujoliswe kuzo kwaye aziphili ubungakanani bazo.

Kananjalo ungakhankanya umsebenzi we callback ukubaleka emva kokuba iindlela zigqityiwe 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()

Indlela yejQuery fadeToggle() ibonisa okanye ifihla izinto ezikhethiweyo ngokwenza i-opacity yazo ibonise ukuba isiqalo sibonisiwe, siyakuphelelwa; ukuba ibifihliwe, izakucima (i.e. toggle i-fide effect).

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

Ungakhankanya kwakhona iparameter yobomi bendlela fadeToggle() malunga neendlela fadeIn() / fadeOut(), ukulawula ubude bexesha okanye isantya soopopayi be-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>

I-fadeToggle () indlela ikwanakho ukukhankanya 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>

Metodo fadeTo()

Indlela yejQuery fadeTo() iyafana nendlela fadeIn(), kodwa ngokungafaniyo nendlela fadeIn(), indlela fadeTo() ikuvumela ukuba udibanise izinto ukuya kumphakamo othile wokungafihli.

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

Ipharamitha efunekayo opacity ixela ukungafihli kokugqibela kwezinto ekujoliswe kuzo enokuba linani phakathi kuka-0 no-1. Ipharamitha duration o speed iyafuneka kwakhona kule ndlela echaza ubude bexesha le-animation fade.

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

Skrola iziphumo

tindlela slideUp() e slideDown()

Indlela yejQuery slideUp() e slideDown() zisetyenziselwa ukufihla okanye ukubonisa izakhi ze-HTML ngokunciphisa ngokuthe ngcembe okanye ukwandisa ubude bazo (okt ukuskrola phezulu okanye phantsi).

<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 iindlela zeziphumo ze-jQuery, ungakhetha ubude bexesha okanye isantya separameter yeendlela slideUp() e slideDown() ukulawula ubude bexesha lophiliso lwesilayidi. Ubude bexesha bunokuchazwa kusetyenziswa omnye wemitya yangaphambilidefihayi 'slow' o 'fast', okanye kwinani lemizuzwana; amaxabiso aphezulu abonisa oopopayi abacothayo.

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

Ungakhankanya kwakhona umsebenzi wokufowuna oza kuphunyezwa emva kokugqitywa 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>

Metodo slideToggle()

Indlela yejQuery slideToggle() bonisa okanye ufihle izinto ezikhethiweyo ngokwenza ubude bazo ukuze ukuba into ibonisiwe ekuqaleni, iya kuskrolwa phezulu; ukuba ifihliwe, izakuskrolwa phantsi, i.e. toggles phakathi kweendlela slideUp() e slideDown().

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

Ngokufanayo, ungachaza iparamitha yobomi bendlela slideToggle() eze 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, unokuphinda uchaze umsebenzi wokufowuna wendlela 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>

Iziphumo zoopopayi

Metodo animate()

Indlela yejQuery animate() isetyenziselwa ukwenza oopopayi besiko. Indlela animate() isetyenziselwa ukuvuselela iipropati zeCSS zamanani, ezifana width, height, margin, padding, opacity, top, left njl. kodwa iipropati ezingezizo amanani njenge color o background-color azikwazi ukwenzeka kusetyenziswa usebenziso olusisiseko lwejQuery.

Isivakalisi esisisiseko sendlela animate() yile ilandelayo:

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

Iiparamitha zendlela animate() zineentsingiselo zilandelayo:

• Iparamitha yeepropati ezifunekayo defiGqibezela iipropathi zeCSS ukuze uphile.
• Ipharamitha yobude obukhethiweyo ixela ukuba uphiliso luyakuqhuba ixesha elingakanani. Ubude bexesha bunokuchazwa kusetyenziswa omnye wemitya yangaphambilidefihayi 'slow' o 'fast', okanye kwinani lemizuzwana; amaxabiso aphezulu abonisa oopopayi abacothayo.
• Ukhetho lokufowuna iparamitha ngumsebenzi wokufowuna emva kokuba uphiliso lugqityiwe.

Ngezantsi ngumzekelo olula wendlela animate() ebonisa umfanekiso ukusuka kwindawo yawo yokuqala ukuya ekunene nge 300 pixels ngokucofa iqhosha.

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

Ungaphinda uphilise iipropathi ezininzi zento kunye ngexesha elinye usebenzisa indlela animate(). Zonke iipropathi zenziwe oopopayi ngaxeshanye ngaphandle kokulibazisa.

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

Ungaphinda uphilise iipropathi ezininzi zento enye nganye, kumgca usebenzisa umsebenzi wokudibanisa wejQuery.

Lo mzekelo ulandelayo ubonisa upopayi osemgceni okanye obotshelelweyo wejQuery, apho uphiliso ngalunye luya kuqala xa upopayi lwangaphambili lugqityiwe. Siza kubona umsebenzi wokudibanisa kwinqaku elizayo.

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

Kusenokwenzeka definish amaxabiso azalanayo kwiipropathi ezinopopayi. Ukuba ixabiso lixelwe ngesimaphambili += o -=, ixabiso ekujoliswe kulo libalwa ngokudibanisa okanye ukuthabatha inani elichaziweyo kwixabiso langoku lepropati.

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

Ukongeza kumaxabiso amanani, ipropathi nganye inokwamkela imitya 'show', 'hide' e 'toggle'. Kuya kuba luncedo kakhulu kwimeko apho ufuna nje ukuphilisa ipropathi ukusuka kwixabiso layo langoku ukuya kwixabiso layo lokuqala kwaye ngokuphambeneyo.

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

Metodo stop()

Indlela yejQuery stop() isetyenziselwa ukumisa ngoku uqhuba oopopayi bejQuery okanye iziphumo kwizinto ezikhethiweyo phambi kokuba kugqitywe.

Isivakalisi esisisiseko sendlela stop() I-jQuery inokunikwa nge:

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

Iiparamitha kwesi sintaksi singentla sineentsingiselo zilandelayo:

• Il ozikhethelayo iparameter boolean stopAll, ixela ukuba kususwe okanye kungasuswa oopopayi abasemgceni. Ngaphambilidefinite yi false, oku kuthetha ukuba kuphela oopopayi bangoku abazakunqunyanyiswa, okuseleyo koopopayi emgceni kuyakwenziwa kamva.
• Ipharamitha ye boolean goToEnd ukukhetha ixela ukuba ugqibezele oopopayi bangoku kwangoko. Ngaphambilidefinite yi false.

Nanku umzekelo olula obonisa indlela stop() kwintshukumo yokwenyani apho unokuqala kwaye uyeke uphiliso ngokucofa iqhosha.

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

Nanku omnye umzekelo wale ndlela apho ukuba ucofa iqhosha kwakhonaSlide Toggle” emva kokuqalisa oopopayi kodwa ngaphambi kokuba bagqibezele, oopopayi baya kuqalisa ngoko nangoko kwicala elahlukileyo kwindawo yokuqala egciniweyo.

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

Xa usenza isiphumo se-hover enyakazayo, enye yeengxaki eziqhelekileyo onokuthi udibane nazo ziipopayi ezininzi emgceni, xa ubeka ngokukhawuleza kwaye ususa isalathisi semouse. Kutheni, kule meko, mouseenter gli mouseleave Iziganeko zikhutshwa ngokukhawuleza phambi kokuba oopopayi bagqitywe. Ukuze ugweme le ngxaki kwaye wenze i-hover epholileyo kunye ne-hover effect, unokongeza stop(true, true)kwikhonkco lendlela, ngolu hlobo:

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

callback

Iingxelo zeJavaScript zenziwa ngomgca ngomgca. Nangona kunjalo, kuba isiphumo sejQuery sithatha ixesha ukugqiba, ikhowudi yomgca olandelayo inokusebenza ngelixa isiphumo sangaphambili sisasebenza. Ukuthintela oku kungenzeki, i-jQuery ibonelela ngomsebenzi wokufowuna kwisiphumo ngasinye.

Umsebenzi wokufowuna ngumsebenzi osebenza xa isiphumo sigqityiwe. Umsebenzi wokufowuna ugqithiselwa njengengxoxo kwiindlela zesiphumo, kwaye ziqhele ukuvela njengengxoxo yokugqibela. Umzekelo, i-syntax esisiseko ye-jQuery effect method slideToggle() ngomsebenzi wokufowuna onokuchazwa ngolu hlobo lulandelayo:

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

Qwalasela lo mzekelo ulandelayo apho sibeke khona iingxelo slideToggle()e alert()omnye ecaleni komnye. Ukuba uzama le khowudi, isivuseleli siya kuvela ngoko nangoko emva kokucofa iqhosha lokuguqula ngaphandle kokulinda isiphumo soguqulo lwesilayidi sigqibezele.

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

Kwaye nantsi inguqulelo elungisiweyo yomzekelo wangaphambili apho sifake ingxelo alert() ngaphakathi komsebenzi wokufowuna wendlela slideToggle(). Ukuba uzama le khowudi, umyalezo wesilumkiso uya kuvela xa isiphumo sokuguqula isilayidi sigqityiwe.

<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, unako defiGqiba imisebenzi yokufowuna yezinye iindlela zesiphumo se-jQuery, njenge show(), hide(), fadeIn(), fadeOut(), animate(), njl.

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

Ukuba uzama ikhowudi yesampuli engentla, uya kufumana umyalezo ofanayo wesilumkiso kabini kanye kwinto nganye <h1> e <p>, emva kokunqakraza kwiqhosha lokuvula.

BlogInnovazione.it