Yn dit artikel sille wy sjen hoe't jo ferskate JQuery-metoaden kinne brûke foar it generearjen fan animaasjes.
hide() En show()De metoade hide() stelt de styl gewoan ynline yn display: none foar selektearre items. Oarsom, de metoade show () herstelt de werjefte eigenskippen.
Litte wy in foarbyld sjen:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Yn it earste gefal is de paragraaf ferburgen as jo op de knop klikke (hide-btn), yn it twadde gefal wurdt de paragraaf toand as jo op de knop (show-btn).
Jo kinne ek de doerparameter opjaan, om de show te animearjen en effekt te ferbergjen foar in perioade fan tiid.
Durations kinne wurde oantsjutte mei ien fan 'e pre snarendefinacht 'slow' o 'fast', of yn in oantal millisekonden, foar gruttere presyzje; hegere wearden jouwe stadiger animaasjes oan.
<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>De string predefilyts famke 'fast' jout in doer fan 200 millisekonden, wylst de tekenrige 'slow' jout de doer fan 600 millisekonden oan.
Wy kinne oantsjutte in funksje fan callback wurde útfierd nei foltôging fan de metoade show() of 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>De jQuery metoade toggle() items sjen litte of ferbergje op sa'n manier dat as it item earst werjûn wurdt, it ferburgen wurdt; oarsom, as it ferburgen is, sil it werjûn wurde (wikselet praktysk syn sichtberens).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Op deselde manier kinne jo de parameter opjaan duration foar de metoade toggle(), op sa'n manier om de oergong tusken sichtber en ferburgen te animearjen, lykas metoaden 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>Op deselde manier kinne jo ek opjaan in funksje fan callback foar de metoade 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()Jo kinne jQuery-metoaden brûke fadeIn()e fadeOut() om HTML-eleminten sjen te litten of te ferbergjen, stadichoan fergrutsje of ferminderjen fan har opaciteit en it meitsjen fan in fading effekt.
<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>Lykas oare jQuery effekten metoaden, kinne jo opsjoneel opjaan doer of snelheid parameter foar metoaden fadeIn()e fadeOut(), om de doer fan 'e fade te kontrolearjen. Durations kinne wurde oantsjutte mei ien fan 'e pre snarendefinacht 'slow' o 'fast', of yn in oantal millisekonden; hegere wearden jouwe stadigere animaasjes oan.
<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>it effekt fan 'e metoaden fadeIn() / fadeOut() It is gelyk oan show() / hide(), mar yn tsjinstelling ta de metoaden show() / hide(), de eardere animearje allinich de opaciteit fan 'e doeleleminten en animearje har grutte net.
Ek kinne jo opjaan in funksje fan callback om te rinnen neidat de metoaden foltôge binne 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()De jQuery metoade fadeToggle() toant of ferberget selekteare eleminten troch har opasiteit te animearjen sadat as it elemint earst werjûn wurdt, it ferdwynt; as it ferburgen wie, sil it ferdwine (dus wikselje it fade-effekt).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Jo kinne ek de lifetime parameter foar de metoade opjaan fadeToggle() as foar de metoaden fadeIn() / fadeOut(), om de doer of snelheid fan 'e fade-animaasje te kontrolearjen.
<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>De metoade fadeToggle () hat ek de mooglikheid om in funksje op te jaan 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()De jQuery metoade fadeTo() it is gelyk oan de metoade fadeIn(), mar yn tsjinstelling ta de metoade fadeIn(), metoade fadeTo() lit jo eleminten mingje nei in bepaald nivo fan dekking.
$(selector).fadeTo(speed, opacity, callback);De fereaske parameter opacity spesifisearret de definitive opaciteit fan de doelgroep eleminten dy't kin wêze in nûmer tusken 0 en 1. De parameter duration o speed it is ek nedich foar dizze metoade dy't spesifisearret de doer fan 'e animaasje 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()De jQuery metoade slideUp() e slideDown() wurde brûkt om HTML-eleminten te ferbergjen of sjen te litten troch har hichte stadichoan te ferleegjen of te ferheegjen (dat wol sizze se omheech of omleech te rôljen).
<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>Lykas oare jQuery effekten metoaden, kinne jo opsjoneel opjaan doer of snelheid parameter foar de metoaden slideUp() e slideDown() om de doer fan 'e dia-animaasje te kontrolearjen. Durations kinne wurde oantsjutte mei ien fan 'e pre snarendefinacht 'slow' o 'fast', of yn in oantal millisekonden; hegere wearden jouwe stadigere animaasjes oan.
<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>Jo kinne ek in callback-funksje opjaan om út te fieren nei foltôging fan de metoade 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()De jQuery metoade slideToggle() selekteare eleminten sjen litte of ferbergje troch har hichte te animearjen, sadat as it elemint yn earste ynstânsje werjûn wurdt, it omheech rôlje sil; as it ferburgen is, sil it nei ûnderen rôle wurde, d.w.s. wikselt tusken metoaden slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Op deselde manier kinne jo de lifetime parameter foar de metoade opjaan slideToggle() komme 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>Op deselde manier kinne jo ek in werombelfunksje foar de metoade opjaan 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()De jQuery metoade animate() it wurdt brûkt om oanpaste animaasjes te meitsjen. De metoade animate() wurdt brûkt om numerike CSS-eigenskippen te animearjen, lykas width, height, margin, padding, opacity, top, left ensfh. mar net-numerike eigenskippen lykas color o background-color se kinne net wurde animearre mei help fan basis jQuery funksjonaliteit.
De basissyntaksis fan 'e metoade animate() it is it folgjende:
$(selector).animate({ properties }, duration, callback);Metoade parameters animate() hawwe de folgjende betsjuttingen:
'slow' o 'fast', of yn in oantal millisekonden; hegere wearden jouwe stadigere animaasjes oan.Hjirûnder is in ienfâldich foarbyld fan 'e metoade animate() dy't animearret in ôfbylding fan syn oarspronklike posysje nei rjochts troch 300 piksels op knop klik.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Jo kinne ek meardere eigenskippen fan in elemint tagelyk animearje mei de metoade animate(). Alle eigenskippen waarden tagelyk sûnder fertraging animearre.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Jo kinne ek animearje meardere eigenskippen fan in elemint ien foar ien yndividueel, yn in wachtrige mei help fan jQuery syn gearhing funksje.
It folgjende foarbyld toant in wachtrige of keatling jQuery-animaasje, dêr't elke animaasje sil begjinne as de foarige animaasje op it elemint is foltôge. Wy sille de gearhingfunksje sjen yn in takomstich artikel.
<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>It is ek mooglik definish relative wearden foar animearre eigenskippen. As in wearde wurdt oantsjutte mei in foarheaksel += o -=, De doelwearde wurdt berekkene troch it oantsjutte nûmer ta te foegjen of te subtrahearjen fan 'e hjoeddeistige wearde fan it pân.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Neist numerike wearden kin elk eigendom tekenjen akseptearje 'show', 'hide' e 'toggle'. It sil heul nuttich wêze yn in situaasje wêr't jo it pân gewoan wolle animearje fan 'e hjoeddeistige wearde nei syn begjinwearde en oarsom.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()De jQuery metoade stop() wurdt brûkt om te stopjen op it stuit rinnende jQuery-animaasjes of effekten op selektearre eleminten foar foltôging.
De basissyntaksis fan 'e metoade stop() jQuery kin wurde jûn mei:
$(selector).stop(stopAll, goToEnd);De parameters yn 'e boppesteande syntaksis hawwe de folgjende betsjuttingen:
false, dit betsjut dat allinich de aktuele animaasje stoppe wurdt, de rest fan 'e animaasjes yn 'e wachtrige wurde letter útfierd.false.Hjir is in ienfâldich foarbyld dat de metoade demonstrearret stop() yn echte aksje wêr kinne jo begjinne en stopje de animaasje op knop klik.
<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>Hjir is in oar foarbyld fan dizze metoade wêr as jo op 'e knop wer klikkeSlide Toggle” nei it starten fan de animaasje, mar foardat it foltôge is, sil de animaasje fuortendaliks begjinne yn 'e tsjinoerstelde rjochting fan it bewarre begjinpunt.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>By it meitsjen fan it animearre hover-effekt is ien fan 'e meast foarkommende problemen dy't jo kinne tsjinkomme, meardere animaasjes yn' e wachtrige, as jo de mûsoanwizer fluch pleatse en fuortsmite. Wêrom, yn dizze situaasje, mouseenter de mouseleave eveneminten wurde fluch ûntslein foardat de animaasje foltôge is. Om dit probleem te foarkommen en in moai en glêd hovereffekt te meitsjen, kinne jo tafoegje stop(true, true)nei de metoadeketen, lykas sa:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript-útspraken wurde line foar rigel útfierd. Om't it jQuery-effekt lykwols wat tiid nimt om te foltôgjen, kin de koade fan 'e folgjende rigel rinne wylst it foarige effekt noch rint. Om foar te kommen dat dit bart, jout jQuery in callback funksje foar eltse effekt metoade.
In werombelfunksje is in funksje dy't rint as it effekt foltôge is. De werombelfunksje wurdt trochjûn as argumint oan 'e metoaden fan it effekt, en se ferskine normaal as it lêste metoadeargumint. Bygelyks de basissyntaksis fan 'e jQuery-effektmetoade slideToggle() mei in werombelfunksje dy't as folget kin wurde oantsjutte:
$(selector).slideToggle(duration, callback);Beskôgje it folgjende foarbyld wêr't wy de útspraken pleatst hawwe slideToggle()e alert()de iene njonken de oare. As jo dizze koade probearje, sil de warskôging fuortdaliks ferskine nei't jo op de wikselknop klikke sûnder te wachtsjen op it effekt fan 'e slide-wikseling om te foltôgjen.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>En hjir is de wizige ferzje fan it foarige foarbyld wêr't wy de ferklearring ynfoege alert() binnen in callback funksje foar de metoade slideToggle(). As jo dizze koade besykje, sil it warskôgingsberjocht ferskine as it slide-wikseleffekt foltôge is.
<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>Likegoed kinne jo defifinish callback funksjes foar de oare jQuery effekt metoaden, lykas show(), hide(), fadeIn(), fadeOut(), animate(), ensfh.
<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>As jo de foarbyldkoade hjirboppe besykje, krije jo itselde warskôgingsberjocht twa kear ien kear per item <h1> e <p>, nei it klikken op de aktivearje knop.
BlogInnovazione.it
De UK CMA hat in warskôging útjûn oer it gedrach fan Big Tech yn 'e merk foar keunstmjittige yntelliginsje. Dêr…
It Beslút "Case Green", formulearre troch de Jeropeeske Uny om de enerzjy-effisjinsje fan gebouwen te ferbetterjen, hat syn wetjouwingsproses ôfsletten mei ...
Casaleggio Associati's jierferslach oer e-commerce yn Itaalje presintearre. Rapport mei de titel "AI-Commerce: de grinzen fan e-commerce mei keunstmjittige yntelliginsje"....
Resultaat fan konstante technologyske ynnovaasje en ynset foar it miljeu en it wolwêzen fan minsken. Bandalux presintearret Airpure®, in tinte...