Katika nakala hii tutaona jinsi ya kutumia njia tofauti za JQuery kutengeneza uhuishaji.
hide() Na show()Njia ya kujificha () inaweka tu mtindo ndani display: none kwa vitu vilivyochaguliwa. Kinyume chake, njia ya show() inarejesha sifa za kuonyesha.
Hebu tuone mfano:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Katika kesi ya kwanza aya imefichwa unapobonyeza kitufe (hide-btn), katika kesi ya pili aya inaonyeshwa unapobofya kitufe (show-btn).
Unaweza pia kubainisha kigezo cha muda, ili kuhuisha onyesho na kuficha athari kwa muda fulani.
Muda unaweza kubainishwa kwa kutumia moja ya mifuatano ya awalidefijioni 'slow' o 'fast', au kwa idadi ya milisekunde, kwa usahihi zaidi; maadili ya juu yanaonyesha uhuishaji wa polepole.
<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>Kamba kabladefimsichana mdogo 'fast' inaonyesha muda wa milliseconds 200, wakati kamba 'slow' inaonyesha muda wa milisekunde 600.
Tunaweza kubainisha kazi ya callback kutekelezwa baada ya mbinu kukamilika show() au 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>Mbinu ya jQuery toggle() onyesha au ufiche vitu kwa namna ambayo ikiwa kipengee kinaonyeshwa hapo awali, kitafichwa; kinyume chake ikiwa imefichwa, itaonyeshwa (inabadilisha mwonekano wake).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Vile vile, unaweza kutaja parameter duration kwa mbinu toggle(), kwa njia ya kuhuisha mpito kati ya inayoonekana na iliyofichwa, kama mbinu 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>Vile vile, unaweza pia kutaja kazi ya callback kwa mbinu 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()Unaweza kutumia njia za jQuery fadeIn()e fadeOut() kuonyesha au kuficha vipengee vya HTML, kuongeza au kupunguza uwazi wao hatua kwa hatua na kuunda athari inayofifia.
<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>Kama njia zingine za athari za jQuery, unaweza kutaja kwa hiari muda au kigezo cha kasi cha mbinu fadeIn()e fadeOut(), ili kudhibiti muda wa kufifia. Muda unaweza kubainishwa kwa kutumia moja ya mifuatano ya awalidefijioni 'slow' o 'fast', au kwa idadi ya milliseconds; maadili ya juu yanaonyesha uhuishaji wa polepole.
<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>athari za mbinu fadeIn() / fadeOut() Inafanana na show() / hide(), lakini tofauti na mbinu show() / hide(), ya awali huhuisha tu uwazi wa vipengele lengwa na usihuishe ukubwa wao.
Pia unaweza kutaja kazi ya callback kukimbia baada ya mbinu kukamilika 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()Mbinu ya jQuery fadeToggle() huonyesha au kuficha vipengele vilivyochaguliwa kwa kuhuisha uwazi wao ili kwamba ikiwa kipengele kitaonyeshwa hapo awali, kitafifia; ikiwa ilifichwa, itafifia (yaani kugeuza athari ya kufifia).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Unaweza pia kutaja kigezo cha maisha kwa njia hiyo fadeToggle() kuhusu mbinu fadeIn() / fadeOut(), ili kudhibiti muda au kasi ya uhuishaji uliofifia.
<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>Mbinu ya fadeToggle() pia ina uwezo wa kubainisha chaguo la kukokotoa 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()Mbinu ya jQuery fadeTo() ni sawa na mbinu fadeIn(), lakini tofauti na njia fadeIn(), mbinu fadeTo() inakuwezesha kuchanganya vipengele hadi kiwango fulani cha uwazi.
$(selector).fadeTo(speed, opacity, callback);Kigezo kinachohitajika opacity hubainisha uwazi wa mwisho wa vipengele lengwa ambavyo vinaweza kuwa nambari kati ya 0 na 1. Kigezo duration o speed inahitajika pia kwa njia hii ambayo inabainisha muda wa kufifia kwa uhuishaji.
<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()Mbinu ya jQuery slideUp() e slideDown() hutumika kuficha au kuonyesha vipengele vya HTML kwa kupunguza au kuongeza urefu wake hatua kwa hatua (yaani kuvisogeza juu au chini).
<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>Kama njia zingine za athari za jQuery, unaweza kutaja kwa hiari muda au kigezo cha kasi cha mbinu slideUp() e slideDown() ili kudhibiti muda wa uhuishaji wa slaidi. Muda unaweza kubainishwa kwa kutumia moja ya mifuatano ya awalidefijioni 'slow' o 'fast', au kwa idadi ya milliseconds; maadili ya juu yanaonyesha uhuishaji wa polepole.
<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>Unaweza pia kubainisha kitendakazi cha kurudisha nyuma ili kutekeleza baada ya kukamilika kwa mbinu 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()Mbinu ya jQuery slideToggle() onyesha au ufiche vipengee vilivyochaguliwa kwa kuhuisha urefu wao ili ikiwa kipengee kitaonyeshwa hapo awali, kitasongeshwa juu; ikiwa imefichwa, itasogezwa chini, i.e. kugeuza kati ya njia slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Vile vile, unaweza kutaja parameter ya maisha kwa njia slideToggle() Kuja 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>Vile vile, unaweza pia kubainisha kitendakazi cha kupiga simu kwa mbinu 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()Mbinu ya jQuery animate() inatumika kuunda uhuishaji maalum. Mbinu animate() hutumika kuhuisha sifa za nambari za CSS, kama vile width, height, margin, padding, opacity, top, left na kadhalika. lakini sifa zisizo za nambari kama color o background-color haziwezi kuhuishwa kwa kutumia utendakazi wa msingi wa jQuery.
Sintaksia ya msingi ya mbinu animate() ni yafuatayo:
$(selector).animate({ properties }, duration, callback);Vigezo vya njia animate() kuwa na maana zifuatazo:
'slow' o 'fast', au kwa idadi ya milliseconds; maadili ya juu yanaonyesha uhuishaji wa polepole.Chini ni mfano rahisi wa njia animate() ambayo huhuisha picha kutoka nafasi yake ya asili hadi kulia kwa pikseli 300 kwenye kubofya kitufe.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Unaweza pia kuhuisha sifa nyingi za kipengele pamoja mara moja kwa kutumia mbinu animate(). Mali zote zilihuishwa kwa wakati mmoja bila kuchelewa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Unaweza pia kuhuisha sifa nyingi za kipengee kimoja baada ya kingine, kwenye foleni ukitumia kipengele cha kukokotoa cha jQuery.
Mfano ufuatao unaonyesha uhuishaji wa jQuery ulio kwenye foleni au uliofungwa, ambapo kila uhuishaji utaanza mara tu uhuishaji uliotangulia kwenye kipengele utakapokamilika. Tutaona kazi ya uunganishaji katika makala yajayo.
<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>Inawezekana pia defikamilisha maadili ya jamaa kwa sifa za uhuishaji. Ikiwa thamani imebainishwa kwa kiambishi awali += o -=, thamani inayolengwa huhesabiwa kwa kuongeza au kupunguza nambari iliyobainishwa kutoka kwa thamani ya sasa ya mali.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Mbali na thamani za nambari, kila kipengele kinaweza kukubali mifuatano 'show', 'hide' e 'toggle'. Itakuwa muhimu sana katika hali ambapo unataka tu kuhuisha mali kutoka kwa thamani yake ya sasa hadi thamani yake ya awali na kinyume chake.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Mbinu ya jQuery stop() inatumika kusimamisha uhuishaji wa sasa wa jQuery au athari kwenye vipengee vilivyochaguliwa kabla ya kukamilika.
Sintaksia ya msingi ya mbinu stop() jQuery inaweza kutolewa na:
$(selector).stop(stopAll, goToEnd);Vigezo katika sintaksia hapo juu vina maana zifuatazo:
false, hii inamaanisha kuwa uhuishaji wa sasa pekee ndio utakaosimamishwa, uhuishaji uliosalia kwenye foleni utatekelezwa baadaye.false.Hapa kuna mfano rahisi unaoonyesha njia stop() katika hatua halisi ambapo unaweza kuanza na kusimamisha uhuishaji kwenye kubofya kitufe.
<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>Hapa kuna mfano mwingine wa njia hii ambapo ukibofya kitufe tenaSlide Toggle” baada ya kuanzisha uhuishaji lakini kabla ya kukamilika, uhuishaji utaanza mara moja kuelekea kinyume na sehemu ya kuanzia iliyohifadhiwa.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Wakati wa kuunda athari ya kuelea iliyohuishwa, mojawapo ya matatizo ya kawaida unayoweza kukutana nayo ni uhuishaji mwingi uliopangwa kwenye foleni, unapoweka na kuondoa kishale cha kipanya kwa haraka. Kwa nini, katika hali hii, mouseenter gli mouseleave matukio hutupwa haraka kabla ya uhuishaji kukamilika. Ili kuepuka tatizo hili na kuunda athari nzuri na laini ya hover, unaweza kuongeza stop(true, true)kwa mlolongo wa njia, kama hivyo:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Taarifa za JavaScript zinatekelezwa mstari kwa mstari. Walakini, kwa kuwa athari ya jQuery inachukua muda kumaliza, msimbo wa mstari unaofuata unaweza kufanya kazi wakati madoido ya awali bado yanaendelea. Ili kuzuia hili kutokea, jQuery hutoa kitendakazi cha kurudisha nyuma kwa kila njia ya athari.
Kitendakazi cha kurudisha nyuma ni chaguo la kukokotoa ambalo hufanya kazi mara tu athari inapokamilika. Kitendaji cha kurudisha nyuma hupitishwa kama hoja kwa njia za athari, na kwa kawaida huonekana kama hoja ya mwisho. Kwa mfano, syntax ya msingi ya njia ya athari ya jQuery slideToggle() na kitendakazi cha kurudi nyuma ambacho kinaweza kubainishwa kama ifuatavyo:
$(selector).slideToggle(duration, callback);Fikiria mfano ufuatao ambapo tumeweka kauli slideToggle()e alert()mmoja kando ya mwingine. Ukijaribu msimbo huu, tahadhari itaonekana mara baada ya kubofya kitufe cha kugeuza bila kusubiri athari ya kugeuza slaidi ikamilike.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Na hapa kuna toleo lililobadilishwa la mfano uliopita ambapo tuliingiza taarifa alert() ndani ya kitendakazi cha kurudi nyuma kwa njia slideToggle(). Ukijaribu msimbo huu, ujumbe wa onyo utaonekana mara tu madoido ya kugeuza slaidi yatakapokamilika.
<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>Vivyo hivyo, unaweza defimaliza utendakazi wa kurudi nyuma kwa njia zingine za athari za jQuery, kama vile show(), hide(), fadeIn(), fadeOut(), animate(), na kadhalika.
<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>Ukijaribu sampuli ya msimbo hapo juu, utapata ujumbe sawa wa onyo mara mbili kwa kila kitu <h1> e <p>, baada ya kubofya kitufe cha kuamsha.
BlogInnovazione.it
Coveware by Veeam itaendelea kutoa huduma za kukabiliana na matukio ya ulaghai mtandaoni. Coveware itatoa uwezo wa uchunguzi na urekebishaji…
Matengenezo ya kitabiri yanaleta mapinduzi katika sekta ya mafuta na gesi, kwa mbinu bunifu na makini ya usimamizi wa mitambo.…
CMA ya Uingereza imetoa onyo kuhusu tabia ya Big Tech katika soko la kijasusi bandia. Hapo...
Amri ya "Nyumba za Kijani", iliyoundwa na Umoja wa Ulaya ili kuongeza ufanisi wa nishati ya majengo, imehitimisha mchakato wake wa kutunga sheria na…