F'dan l-artikolu se naraw kif nużaw metodi JQuery differenti għall-ġenerazzjoni ta 'animazzjonijiet.
hide() U show()Il-metodu hide() sempliċement jistabbilixxi l-istil inline display: none għal oġġetti magħżula. Bil-maqlub, il-metodu show() jirrestawra l-proprjetajiet tal-wiri.
Ejja naraw eżempju:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Fl-ewwel każ il-paragrafu huwa moħbi meta tikklikkja fuq il-buttuna (hide-btn), fit-tieni każ il-paragrafu jintwera meta tikklikkja fuq il-buttuna (show-btn).
Tista 'wkoll tispeċifika l-parametru tat-tul, biex janima l-ispettaklu u jaħbi l-effett għal perjodu ta' żmien.
It-tul ta' żmien jista' jiġi speċifikat bl-użu ta' waħda mill-kordi minn qabeldefifika 'slow' o 'fast', jew f'numru ta 'millisekondi, għal preċiżjoni akbar; valuri ogħla jindikaw animazzjonijiet aktar bil-mod.
<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>Is-sekwenza predefitifla zghira 'fast' jindika tul ta '200 millisekondi, filwaqt li l-sekwenza 'slow' jindika t-tul ta '600 millisekondi.
Nistgħu nispeċifikaw funzjoni ta ' callback li għandu jiġi esegwit wara t-tlestija tal-metodu show() jew 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>Il-metodu jQuery toggle() uri jew aħbi oġġetti b'tali mod li jekk l-oġġett jintwera inizjalment, ikun moħbi; bil-maqlub jekk ikun moħbi, se jintwera (prattikament ibiddel il-viżibilità tiegħu).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Bl-istess mod, tista 'tispeċifika l-parametru duration għall-metodu toggle(), b'tali mod li janima t-tranżizzjoni bejn metodi viżibbli u moħbija, bħal metodi 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>Bl-istess mod, tista 'wkoll tispeċifika funzjoni ta' callback għall-metodu 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()Tista 'tuża metodi jQuery fadeIn()e fadeOut() biex turi jew jaħbi l-elementi HTML, gradwalment iżidu jew jonqsu l-opaċità tagħhom u joħolqu effett ta 'fading.
<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>Bħal metodi oħra ta 'effetti jQuery, tista' b'għażla tispeċifika tul jew parametru tal-veloċità għall-metodi fadeIn()e fadeOut(), sabiex tikkontrolla t-tul tal-fade. It-tul ta' żmien jista' jiġi speċifikat bl-użu ta' waħda mill-kordi minn qabeldefifika 'slow' o 'fast', jew f'numru ta' millisekondi; valuri ogħla jindikaw animazzjonijiet aktar bil-mod.
<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>l-effett tal-metodi fadeIn() / fadeOut() Huwa simili għal show() / hide(), iżda b'differenza mill-metodi show() / hide(), l-ewwel janimaw biss l-opaċità tal-elementi fil-mira u ma janimawx id-daqs tagħhom.
Tista 'wkoll tispeċifika funzjoni ta' callback biex taħdem wara li l-metodi jitlestew 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()Il-metodu jQuery fadeToggle() juri jew jaħbi l-elementi magħżula billi janima l-opaċità tagħhom b'tali mod li jekk l-element jintwera inizjalment, ikun faded out; jekk kien moħbi, se jisparixxi (jiġifieri toggle l-effett fade).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Tista 'wkoll tispeċifika l-parametru tal-ħajja għall-metodu fadeToggle() kif għall-metodi fadeIn() / fadeOut(), biex tikkontrolla t-tul jew il-veloċità tal-animazzjoni 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>Il-metodu fadeToggle() għandu wkoll il-kapaċità li jispeċifika funzjoni 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()Il-metodu jQuery fadeTo() huwa simili għall-metodu fadeIn(), iżda b'differenza mill-metodu fadeIn(), il-metodu fadeTo() iħallik tħallat elementi sa ċertu livell ta 'opaċità.
$(selector).fadeTo(speed, opacity, callback);Il-parametru meħtieġ opacity jispeċifika l-opaċità finali tal-elementi fil-mira li jista 'jkun numru bejn 0 u 1. Il-parametru duration o speed huwa wkoll meħtieġ għal dan il-metodu li jispeċifika t-tul tal-fade animazzjoni.
<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()Il-metodu jQuery slideUp() e slideDown() jintużaw biex jaħbu jew juru l-elementi HTML billi jnaqqsu jew iżidu gradwalment l-għoli tagħhom (jiġifieri scrollinghom 'il fuq jew 'l isfel).
<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>Bħal metodi oħra ta 'effetti jQuery, tista' b'għażla tispeċifika tul jew parametru tal-veloċità għall-metodi slideUp() e slideDown() biex tikkontrolla t-tul tal-animazzjoni slide. It-tul ta' żmien jista' jiġi speċifikat bl-użu ta' waħda mill-kordi minn qabeldefifika 'slow' o 'fast', jew f'numru ta' millisekondi; valuri ogħla jindikaw animazzjonijiet aktar bil-mod.
<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>Tista 'wkoll tispeċifika funzjoni ta' callback biex tesegwixxi wara t-tlestija tal-metodu 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()Il-metodu jQuery slideToggle() uri jew aħbi l-elementi magħżula billi janimaw l-għoli tagħhom sabiex jekk l-element jintwera inizjalment, ikun skrolljat 'il fuq; jekk moħbija, se tiskrollja 'l isfel, jiġifieri taqleb bejn il-metodi slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Bl-istess mod, tista 'tispeċifika l-parametru tal-ħajja għall-metodu slideToggle() Come 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>Bl-istess mod, tista 'wkoll tispeċifika funzjoni ta' callback għall-metodu 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()Il-metodu jQuery animate() huwa użat biex jinħolqu animazzjonijiet tad-dwana. Il-metodu animate() jintuża biex janima proprjetajiet CSS numeriċi, bħal width, height, margin, padding, opacity, top, left eċċ. iżda proprjetajiet mhux numeriċi simili color o background-color ma jistgħux jiġu animati bl-użu tal-funzjonalità bażika jQuery.
Is-sintassi bażika tal-metodu animate() huwa dan li ġej:
$(selector).animate({ properties }, duration, callback);Parametri tal-metodu animate() għandhom it-tifsiriet li ġejjin:
'slow' o 'fast', jew f'numru ta' millisekondi; valuri ogħla jindikaw animazzjonijiet aktar bil-mod.Hawn taħt hemm eżempju sempliċi tal-metodu animate() li janima immaġini mill-pożizzjoni oriġinali tagħha lejn il-lemin bi 300 pixel meta tikklikkja l-buttuna.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Tista 'wkoll tanima proprjetajiet multipli ta' element flimkien f'daqqa billi tuża l-metodu animate(). Il-proprjetajiet kollha ġew animati fl-istess ħin mingħajr ebda dewmien.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Tista 'wkoll tanima proprjetajiet multipli ta' element wieħed wieħed individwalment, fi kju billi tuża l-funzjoni ta 'konkatenazzjoni ta' jQuery.
L-eżempju li ġej juri animazzjoni jQuery fil-kju jew b'katina, fejn kull animazzjoni tibda ladarba titlesta l-animazzjoni preċedenti fuq l-element. Se naraw il-funzjoni tal-konkatenazzjoni f'artiklu futur.
<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>Huwa possibbli wkoll defivaluri relattivi finali għal proprjetajiet animati. Jekk valur huwa speċifikat bi prefiss += o -=, il-valur fil-mira huwa kkalkulat billi żżid jew tnaqqas in-numru speċifikat mill-valur kurrenti tal-proprjetà.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Minbarra l-valuri numeriċi, kull proprjetà tista 'taċċetta kordi 'show', 'hide' e 'toggle'. Ikun utli ħafna f'sitwazzjoni fejn inti tixtieq biss li janimaw il-proprjetà mill-valur attwali tagħha għall-valur inizjali tagħha u viċi versa.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Il-metodu jQuery stop() jintuża biex tieqaf taħdem bħalissa jQuery animazzjonijiet jew effetti fuq elementi magħżula qabel it-tlestija.
Is-sintassi bażika tal-metodu stop() jQuery jista' jingħata bi:
$(selector).stop(stopAll, goToEnd);Il-parametri fis-sintassi ta' hawn fuq għandhom it-tifsiriet li ġejjin:
false, dan ifisser li l-animazzjoni attwali biss se titwaqqaf, il-bqija tal-animazzjonijiet fil-kju se jiġu eżegwiti aktar tard.false.Hawn eżempju sempliċi li juri l-metodu stop() f'azzjoni reali fejn tista 'tibda u twaqqaf l-animazzjoni fuq ikklikkja buttuna.
<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>Hawn eżempju ieħor ta 'dan il-metodu fejn jekk terġa' tikklikkja l-buttunaSlide Toggle” wara li tibda l-animazzjoni iżda qabel ma titlesta, l-animazzjoni tibda immedjatament fid-direzzjoni opposta mill-punt tat-tluq salvat.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Meta toħloq l-effett tal-hover animat, waħda mill-aktar problemi komuni li tista 'tiltaqa' magħhom hija animazzjonijiet multipli fil-kju, meta tpoġġi malajr u tneħħi l-cursor tal-maws. Għaliex, f'din is-sitwazzjoni, mouseenter gli mouseleave avvenimenti jiġu sparati malajr qabel ma titlesta l-animazzjoni. Biex tevita din il-problema u toħloq effett ta 'hover sbieħ u bla xkiel, tista' żżid stop(true, true)għall-katina tal-metodu, bħal hekk:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Dikjarazzjonijiet JavaScript huma esegwiti linja b'linja. Madankollu, peress li l-effett jQuery jieħu xi żmien biex jintemm, il-kodiċi tal-linja li jmiss jista 'jiġi għaddej waqt li l-effett preċedenti jkun għadu għaddej. Biex tevita li dan iseħħ, jQuery jipprovdi funzjoni ta 'callback għal kull metodu ta' effett.
Funzjoni callback hija funzjoni li taħdem ladarba l-effett ikun lest. Il-funzjoni ta 'callback hija mgħoddija bħala argument għall-metodi tal-effett, u ġeneralment jidhru bħala l-aħħar argument tal-metodu. Pereżempju, is-sintassi bażika tal-metodu tal-effett jQuery slideToggle() b'funzjoni ta' callback li tista' tiġi speċifikata kif ġej:
$(selector).slideToggle(duration, callback);Ikkunsidra l-eżempju li ġej fejn poġġejna l-istqarrijiet slideToggle()e alert()wieħed ħdejn l-ieħor. Jekk tipprova dan il-kodiċi, it-twissija tidher immedjatament wara li tikklikkja l-buttuna ta 'toggle mingħajr ma tistenna li jitlesta l-effett ta' toggle slide.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>U hawnhekk hija l-verżjoni modifikata tal-eżempju preċedenti fejn daħħalna l-istqarrija alert() ġewwa funzjoni callback għall-metodu slideToggle(). Jekk tipprova dan il-kodiċi, il-messaġġ ta 'twissija se jidher ladarba jitlesta l-effett toggle slide.
<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>Bl-istess mod, tista ' defifinitura funzjonijiet callback għall-metodi l-oħra effett jQuery, bħal show(), hide(), fadeIn(), fadeOut(), animate(), eċċ.
<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>Jekk tipprova l-kodiċi tal-kampjun ta 'hawn fuq, ikollok l-istess messaġġ ta' twissija darbtejn darba għal kull oġġett <h1> e <p>, wara li tikklikkja fuq il-buttuna attiva.
BlogInnovazione.it
Is-settur navali huwa qawwa ekonomika globali vera, li navigat lejn suq ta’ 150 biljun...
It-Tnejn li għadda, il-Financial Times ħabbret ftehim mal-OpenAI. FT tagħti liċenzja għall-ġurnaliżmu ta’ klassi dinjija tagħha...
Miljuni ta 'nies iħallsu għal servizzi ta' streaming, iħallsu miżati ta 'abbonament ta' kull xahar. Hija opinjoni komuni li inti...
Coveware minn Veeam se jkompli jipprovdi servizzi ta' rispons għal inċidenti ta' estorsjoni ċibernetika. Coveware se joffri forensiċi u kapaċitajiet ta' rimedju...