Muchikamu chino tichaona mashandisiro ekushandisa akasiyana JQuery nzira dzekugadzira mifananidzo.
hide() Uye show()Iyo hide () nzira inongoisa chimiro mukati display: none nokuda kwezvinhu zvakasarudzwa. Sezvineiwo, iyo show() nzira inodzoreredza zvivakwa zvekuratidzira.
Ngationei muenzaniso:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Muchiitiko chekutanga ndima yakavanzwa paunodzvanya bhatani (hide-btn), muchiitiko chechipiri ndima inoratidzwa paunodzvanya bhatani (show-btn).
Iwe unogona zvakare kutsanangura iyo yenguva paramende, kumhanyisa show uye kuvanza maitiro kwenguva yakati rebei.
Nguva inogona kutsanangurwa uchishandisa imwe ye pre tambodefinite 'slow' o 'fast', kana muhuwandu hwemamilliseconds, kuitira kunyatsojeka; hunhu hwepamusoro hunoratidza anononoka animations.
<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>The tambo predefimusikana mudiki 'fast' inoratidza nguva ye200 milliseconds, ukuwo tambo 'slow' inoratidza nguva ye600 milliseconds.
Tinogona kutsanangura basa re callback ichaitwa mushure mekupedza nzira show() kana 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>Iyo jQuery nzira toggle() ratidza kana kuviga zvinhu nenzira yekuti kana chinhu chacho chikatanga kuratidzwa, chichavanzwa; ukuwo kana yakavanzwa, icharatidzwa (inoshandura kuoneka kwayo).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Saizvozvowo, unogona kutsanangura parameter duration kune nzira toggle(), nenzira yekunamisa shanduko pakati pezvinooneka uye zvakavanzika, senzira 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>Saizvozvo, iwe unogona zvakare kutsanangura basa re callback kune nzira 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()Unogona kushandisa jQuery nzira fadeIn()e fadeOut() kuratidza kana kuvanza zvinhu zveHTML, zvishoma nezvishoma zvichiwedzera kana kuderedza opacity yavo uye kugadzira kupera simba.
<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>Kufanana nedzimwe nzira dzejQuery mhedzisiro, unogona kusarudza kudoma nguva kana yekumhanyisa parameter yenzira fadeIn()e fadeOut(), kuitira kudzora nguva yekupera. Nguva inogona kutsanangurwa uchishandisa imwe ye pre tambodefinite 'slow' o 'fast', kana muhuwandu hwemamilliseconds; hunhu hwepamusoro hunoratidza anononoka animations.
<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>mhedzisiro yenzira fadeIn() / fadeOut() Zvakafanana ne show() / hide(), asi kusiyana nemitoo show() / hide(), iyo yekutanga inongoraramisa kupenya kwezvinhu zvakanangwa uye haitsigire saizi yazvo.
Uyewo unogona kutsanangura basa re callback kumhanya mushure mekunge nzira dzapera 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()Iyo jQuery nzira fadeToggle() inoratidza kana kuvanza zvinhu zvakasarudzwa nekusimudzira opacity yavo zvekuti kana chinhu chikatanga kuratidzwa, chinodzima; kana yakavanzwa, inopera (kureva shandura iyo fade maitiro).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Iwe unogona zvakare kutsanangura iyo lifetime parameter yeiyo nzira fadeToggle() kana dziri nzira fadeIn() / fadeOut(), kudzora nguva kana kumhanya kweiyo fade animation.
<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>Iyo fadeToggle() nzira zvakare ine kugona kudoma basa 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()Iyo jQuery nzira fadeTo() inofanana nenzira fadeIn(), asi kusiyana nenzira fadeIn(), nzira fadeTo() inokuita kuti usanganise zvinhu kusvika kune imwe nhanho yekusajeka.
$(selector).fadeTo(speed, opacity, callback);Iyo inodiwa parameter opacity inotsanangura kusajeka kwekupedzisira kwezvinhu zvakanangwa zvinogona kuva nhamba iri pakati pa 0 na 1. Chimiro duration o speed inodiwawo kune iyi nzira inotsanangura nguva yeanimation 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>slideUp() e slideDown()Iyo jQuery nzira slideUp() e slideDown() anoshandiswa kuvanza kana kuratidza HTML zvinhu nekudzikira zvishoma nezvishoma kana kuwedzera urefu hwadzo (kureva kupuruzira kumusoro kana pasi).
<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>Kufanana nedzimwe nzira dzejQuery mhedzisiro, unogona kusarudza kudoma nguva kana yekumhanyisa parameter kune nzira slideUp() e slideDown() kudzora nguva yemasiraidhi animation. Nguva inogona kutsanangurwa uchishandisa imwe ye pre tambodefinite 'slow' o 'fast', kana muhuwandu hwemamilliseconds; hunhu hwepamusoro hunoratidza anononoka animations.
<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>Iwe unogona zvakare kutsanangudza callback basa rekuita mushure mekupera nzira 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()Iyo jQuery nzira slideToggle() ratidza kana kuvanza zvinhu zvakasarudzwa nekusimudzira kureba kwavo kuitira kuti kana chinhu chikatanga kuratidzwa, chinopetwa kumusoro; kana yakavanzwa, inotsvetwa pasi, i.e. toggles pakati pemitoo slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Saizvozvo, iwe unogona kutsanangura iyo yehupenyu paramende yeiyo nzira slideToggle() uya 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>Saizvozvo, iwe unogona zvakare kutsanangura iyo callback basa reiyo nzira 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()Iyo jQuery nzira animate() inoshandiswa kugadzira animations etsika. Nzira animate() inoshandiswa kufambisa nhamba dzeCSS zvivakwa, senge width, height, margin, padding, opacity, top, left etc. asi asiri-nhamba-nhamba akafanana color o background-color havagone kuve nehupenyu vachishandisa basic jQuery mashandiro.
Iyo yekutanga syntax yenzira animate() ndizvo zvinotevera:
$(selector).animate({ properties }, duration, callback);Nzira parameters animate() zvine zvirevo zvinotevera:
'slow' o 'fast', kana muhuwandu hwemamilliseconds; hunhu hwepamusoro hunoratidza anononoka animations.Pasi pane muenzaniso wakajeka wenzira animate() iyo inosimudzira mufananidzo kubva panzvimbo yayo yepakutanga kuenda kurudyi ne300 pixels pakudzvanya bhatani.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Iwe unogona zvakare kusimudzira akawanda zvimiro zvechinhu pamwechete kamwechete uchishandisa nzira animate(). Zvinhu zvese zvaiitwa panguva imwe chete pasina kunonoka.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Iwe unogona zvakare kusimudzira zvimiro zvechinhu chimwe nechimwe, mumutsara uchishandisa jQuery's concatenation function.
Muenzaniso unotevera unoratidza animation yejQuery yakamirirwa kana yakasungwa, apo animation yega yega inozotanga kana animation yakapfuura pane chinhu yapera. Tichaona iyo concatenation basa mune ramangwana chinyorwa.
<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>Zvinogonekawo definish hama kukosha kune animated zvivakwa. Kana kukosha kuchitsanangurwa nechirevo chekutanga += o -=, kukosha kwechinangwa kunoverengwa nekuwedzera kana kubvisa nhamba yakatarwa kubva pamutengo wezvino weimba.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Pamusoro penhamba dzenhamba, chivakwa chega chega chinogona kugamuchira tambo 'show', 'hide' e 'toggle'. Izvo zvichabatsira zvakanyanya mumamiriro ezvinhu apo iwe unongoda kufambisa chivakwa kubva kune yazvino kukosha kune yayo yekutanga kukosha uye zvinopesana.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Iyo jQuery nzira stop() inoshandiswa kumisa parizvino jQuery animations kana mhedzisiro pazvinhu zvakasarudzwa isati yapera.
Iyo yekutanga syntax yenzira stop() jQuery inogona kupihwa ne:
$(selector).stop(stopAll, goToEnd);Maparamita ari musyntax ari pamusoro ane zvirevo zvinotevera:
false, izvi zvinoreva kuti animation yazvino chete ndiyo ichamiswa, mamwe maanimation ari mumutsara anozoitwa gare gare.false.Heino muenzaniso wakapfava unoratidza nzira stop() mukuita chaiko kwaunogona kutanga uye kumisa iwo animation pabhatani kudzvanya.
<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>Heano mumwe muenzaniso weiyi nzira apo kana ukadzvanya bhatani zvakareSlide Toggle” mushure mekutanga animation asi isati yapera, iyo animation inobva yangotanga yakanangana neyakachengetwa panotangira.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Paunenge uchigadzira iyo animated hover mhedzisiro, rimwe rematambudziko akajairika aungasangana nawo akawanda animations akamisikidzwa, paunokasira kuisa uye kubvisa mbeva cursor. Sei, mumamiriro ezvinhu aya, mouseenter gli mouseleave zviitiko zvinodzingwa nekukurumidza animation isati yapera. Kuti udzivise dambudziko iri uye kugadzira yakanaka uye yakatsetseka hover maitiro, unogona kuwedzera stop(true, true)kune iyo nzira ketani, sekudaro:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Mashoko eJavaScript anoitwa mutsara nemutsara. Nekudaro, sezvo iyo jQuery mhedzisiro inotora nguva kuti ipedze, iyo inotevera mutsara kodhi inogona kumhanya iyo yapfuura mhedzisiro ichiri kushanda. Kuti izvi zvisaitike, jQuery inopa callback basa kune yega yega maitiro maitiro.
A callback function ibasa rinomhanya kana mhedzisiro yapera. Iyo callback basa inopfuudzwa senharo kune maitiro ekuita, uye iwo anowanzo kuoneka seyekupedzisira nzira nharo. Semuenzaniso, iyo yekutanga syntax yejQuery maitiro maitiro slideToggle() ine callback function inogona kutsanangurwa sezvizvi:
$(selector).slideToggle(duration, callback);Chimbofunga muenzaniso unotevera watakaisa zvirevo slideToggle()e alert()mumwe parutivi pomumwe. Ukayedza iyi kodhi, yambiro ichaonekwa pakarepo mushure mekudzvanya bhatani rekushandura usina kumirira kuti slide toggle effect ipere.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Uye heino vhezheni yakagadziridzwa yemuenzaniso wapfuura patakaisa chirevo alert() mukati mekuita callback yenzira slideToggle(). Kana ukaedza iyi kodhi, iyo yambiro meseji ichaonekwa kana slide toggle effect yapera.
<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>Saizvozvowo, unogona defikupedza callback mabasa kune mamwe jQuery maitiro maitiro, akadai show(), hide(), fadeIn(), fadeOut(), animate(), nezvimwe.
<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>Kana iwe ukaedza kodhi yemuenzaniso iri pamusoro, iwe unowana imwechete yambiro meseji kaviri kamwe pachinhu chimwe chete <h1> e <p>, mushure mekudzvanya bhatani rekuita.
BlogInnovazione.it
Coveware neVeeam icharamba ichipa cyber kubira chiitiko mhinduro masevhisi. Coveware ichapa forensics uye kugadzirisa kugona…
Kufanofungidzira kugadzirisa kuri kushandura chikamu cheoiri & gasi, nemaitiro matsva uye akasimba ekutarisira zvidyarwa.…
Iyo UK CMA yakapa yambiro nezvemaitiro eBig Tech mumusika wehungwaru hwekugadzira. Ikoko…
Chirevo che "Case Green", chakagadzirwa neEuropean Union kuti chiwedzere kushanda nesimba kwezvivakwa, chapedza hurongwa hwayo hwemutemo ne…