Di vê gotarê de em ê bibînin ka meriv çawa rêbazên cûda JQuery ji bo hilberîna anîmasyonan bikar tîne.
hide() Û show()Rêbaza hide() bi tenê şêwazê di hundurê xwe de destnîşan dike display: none ji bo tiştên hilbijartî. Berevajî vê, rêbaza show() taybetmendiyên pêşandanê sererast dike.
Ka em nimûneyek bibînin:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Di rewşa yekem de gava ku hûn li ser bişkojkê bikirtînin paragraf tê veşartin (hide-btn), di rewşa duyemîn de gava ku hûn li ser bişkojka bitikînin (show-btn).
Her weha hûn dikarin pîvana dirêjbûnê diyar bikin, da ku pêşandanê zindî bikin û ji bo demek dem bandorê veşêrin.
Demjimêr dikare bi karanîna yek ji rêzikên pêşîn were destnîşan kirindefinite 'slow' o 'fast', an jî di çend mîlîçirkeyan de, ji bo rastbûna mezintir; nirxên bilind anîmasyonên hêdîtir nîşan dide.
<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>String berîdefinita 'fast' nîşan dide demajoya 200 milliseconds, dema ku string 'slow' demajoya 600 milîçirkeyan nîşan dide.
Em dikarin fonksiyonek diyar bikin callback ku piştî qedandina rêbazê were darve kirin show() an jî ya 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>Rêbaza jQuery toggle() Tiştan bi vî rengî nîşan bide an veşêre ku heke tişt di destpêkê de were xuyang kirin, dê were veşartin; berevajî vê, heke veşartî be, ew ê were xuyang kirin (bi pratîkî xuyabûna xwe diguhezîne).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Bi heman awayî, hûn dikarin pîvanê diyar bikin duration ji bo rêbazê toggle(), bi vî rengî ku veguherîna di navbera xuya û veşartî de, mîna rêbazan, zindî bike 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>Bi heman awayî, hûn dikarin fonksiyonek jî diyar bikin callback ji bo rêbazê 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()Hûn dikarin rêbazên jQuery bikar bînin fadeIn()e fadeOut() da ku hêmanên HTML-ê nîşan bidin an veşêrin, hêdî hêdî nezelaliya wan zêde an kêm bikin û bandorek windabûnê çêbikin.
<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>Mîna rêbazên din ên bandorên jQuery, hûn dikarin ji bo rêbazan vebijarkî dirêjahî an parametreya lezê diyar bikin fadeIn()e fadeOut(), da ku ji bo kontrolkirina maweya fade. Demjimêr dikare bi karanîna yek ji rêzikên pêşîn were destnîşan kirindefinite 'slow' o 'fast', an jî di çend mîlîçirkeyan de; nirxên bilind anîmasyonên hêdîtir destnîşan dikin.
<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>bandora rêbazan fadeIn() / fadeOut() Ew dişibihe show() / hide(), lê berevajî rêbazan show() / hide(), yên berê tenê nezelaliya hêmanên armancê zindî dikin û mezinahiya wan animate nakin.
Her weha hûn dikarin fonksiyonek diyar bikin callback ji bo meşandina piştî rêbazên temam 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()Rêbaza jQuery fadeToggle() hêmanên hilbijartî nîşan dide an vedişêre bi zindîkirina nezelaliya wan wisa ku heke hêman di destpêkê de were xuyang kirin, ew ê jê bibe; heke ew veşartî bû, ew ê winda bibe (ango bandora fadeyê bikişîne).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Her weha hûn dikarin ji bo rêbazê pîvana jiyanê diyar bikin fadeToggle() ji bo rêbazên fadeIn() / fadeOut(), ji bo kontrolkirina demdirêj an leza anîmasyona 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>Rêbaza fadeToggle() di heman demê de şiyana diyarkirina fonksiyonek heye 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()Rêbaza jQuery fadeTo() dişibe rêbazê fadeIn(), lê berevajî rêbazê fadeIn(), rêbaz fadeTo() dihêle hûn hêmanan heya astek diyar a nezelaliyê tevlihev bikin.
$(selector).fadeTo(speed, opacity, callback);Parametreya pêwîst opacity nezelaliya dawî ya hêmanên armancê diyar dike ku dikare bibe jimarek di navbera 0 û 1 de. Parametre duration o speed di heman demê de ji bo vê rêbazê jî hewce ye ku dema wendakirina anîmasyonê diyar dike.
<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()Rêbaza jQuery slideUp() e slideDown() ew têne bikar anîn ku hêmanên HTML-ê bi hêdî hêdî kêmkirin an zêdekirina bilindahiya wan veşêrin an nîşan bidin (ango bi jor an xwarê wan bigerin).
<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>Mîna rêbazên din ên bandorên jQuery, hûn dikarin ji bo rêbazan vebijarkî dirêjahî an pîvana lezê diyar bikin slideUp() e slideDown() ji bo kontrolkirina dirêjahiya anîmasyona slaytê. Demjimêr dikare bi karanîna yek ji rêzikên pêşîn were destnîşan kirindefinite 'slow' o 'fast', an jî di çend mîlîçirkeyan de; nirxên bilind anîmasyonên hêdîtir destnîşan dikin.
<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>Her weha hûn dikarin fonksiyonek vegerê diyar bikin ku piştî qedandina rêbazê were darve kirin 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()Rêbaza jQuery slideToggle() hêmanên hilbijartî nîşan bidin an veşêrin bi bilindahiya wan anîmasyon bikin da ku heke hêman di destpêkê de were xuyang kirin, ew ê li jor were gerandin; heke veşêre, ew ê li jêr were gerandin, ango di navbera rêbazan de were guheztin slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Bi heman awayî, hûn dikarin ji bo rêbazê pîvana jiyanê diyar bikin slideToggle() hatin 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>Bi heman rengî, hûn dikarin ji bo rêbazê fonksiyonek vegerê jî diyar bikin 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()Rêbaza jQuery animate() ew ji bo afirandina anîmasyonên xwerû tê bikar anîn. Rêbaz animate() ji bo zindîkirina taybetmendiyên CSS-ya hejmarî tê bikar anîn, wek mînak width, height, margin, padding, opacity, top, left etc. lê taybetmendiyên ne-hejmarî mîna color o background-color ew nikarin bi karanîna fonksiyonên bingehîn ên jQuery anîmasyon bibin.
Hevoksaziya bingehîn a rêbazê animate() ew jêrîn e:
$(selector).animate({ properties }, duration, callback);Parametreyên rêbazê animate() wateyên jêrîn hene:
'slow' o 'fast', an jî di çend mîlîçirkeyan de; nirxên bilind anîmasyonên hêdîtir destnîşan dikin.Li jêr mînakek hêsan a rêbazê ye animate() ku wêneyek ji pozîsyona xweya orîjînal ber bi rastê ve bi 300 pixelan bi tikandina bişkokê ve zindî dike.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Her weha hûn dikarin bi karanîna rêbazê bi yekcarî gelek taybetmendiyên hêmanek bi hev re zindî bikin animate(). Hemî taybetmendî di heman demê de bê dereng anîmasyon bûn.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Her weha hûn dikarin gelek taybetmendiyên hêmanek yek bi yek yeko yeko, di dorê de bi karanîna fonksiyona hevgirtinê ya jQuery anîmasyon bikin.
Mînaka jêrîn anîmasyonek jQuery ya rêzkirî an zincîrkirî nîşan dide, ku her anîmasyon piştî ku anîmasyona berê ya li ser hêmanê qediya dê dest pê bike. Em ê di gotarek pêşerojê de fonksiyona hevgirtinê bibînin.
<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>Ew jî gengaz e definirxên têkildar ên nish ji bo taybetmendiyên anîmasyon. Ger nirxek bi pêşgirek were diyar kirin += o -=, nirxa mebest bi zêdekirin an jêkirina jimareya diyarkirî ji nirxa heyî ya xanî tê hesibandin.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ji bilî nirxên hejmarî, her taybetmendiyek dikare rêzan qebûl bike 'show', 'hide' e 'toggle'. Ew ê di rewşek ku hûn tenê dixwazin milkê ji nirxa wê ya heyî heya nirxa wê ya destpêkê zindî bikin û berevajî vê yekê pir bikêr be.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Rêbaza jQuery stop() ji bo rawestandina anîmasyonên an bandorên jQuery yên li ser hêmanên hilbijartî berî qedandinê tê bikar anîn.
Hevoksaziya bingehîn a rêbazê stop() jQuery dikare bi:
$(selector).stop(stopAll, goToEnd);Parametreyên di hevoksaziya jorîn de wateyên jêrîn hene:
false, ev tê wê wateyê ku tenê anîmasyona heyî dê were sekinandin, anîmasyonên mayî yên di dorê de dê paşê bêne darve kirin.false.Li vir mînakek hêsan e ku rêbazê nîşan dide stop() di çalakiya rastîn de ku hûn dikarin li ser bişkojkê anîmasyonê dest pê bikin û rawestînin.
<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>Li vir mînakek din a vê rêbazê ye ku heke hûn dîsa bişkojkê bikirtîninSlide Toggle” piştî destpêkirina anîmasyonê, lê berî ku ew biqede, anîmasyon dê yekser berevajî xala destpêkê ya tomarkirî dest pê bike.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Dema ku hûn bandora hoverê ya anîmasyonî diafirînin, yek ji wan pirsgirêkên herî gelemperî ku hûn dikarin pê re rûbirû bibin ev e ku pir anîmasyon li rêzê ne, gava ku hûn bi lez nîşana mişkê bi cîh bikin û jê derxin. Çima di vê rewşê de, mouseenter gli mouseleave berî ku anîmasyon biqede bûyer zû têne şewitandin. Ji bo ku hûn ji vê pirsgirêkê dûr nekevin û bandorek hoverek xweş û xweş biafirînin, hûn dikarin lê zêde bikin stop(true, true)ji zincîra rêbazê re, mîna:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Daxuyaniyên JavaScript rêz bi rêz têne darve kirin. Lêbelê, ji ber ku bandora jQuery hinekî dem digire ku biqede, dibe ku koda rêza paşîn dema ku bandora berê hîn dimeşe bixebite. Ji bo pêşîgirtina vê yekê, jQuery ji bo her rêbazek bandorê fonksiyonek vegerê peyda dike.
Fonksiyonek vegerandina bangê fonksiyonek e ku piştî ku bandor qediya dixebite. Fonksiyona vegerê wekî argumanek ji rêbazên bandorê re derbas dibe, û ew bi gelemperî wekî argumana rêbazê ya paşîn xuya dikin. Mînakî, hevoksaziya bingehîn a rêbaza bandora jQuery slideToggle() bi fonksiyonek vegerê ya ku dikare wekî jêrîn were destnîşan kirin:
$(selector).slideToggle(duration, callback);Mînaka jêrîn li cihê ku me danezan danîne, binihêrin slideToggle()e alert()yek li kêleka yê din. Ger hûn vê kodê biceribînin, hişyarî dê yekser piştî tikandina bişkoka veguheztinê xuya bibe bêyî ku li bendê bimîne ku bandora guheztina slaytê temam bibe.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Û li vir guhertoya guhertî ya mînaka berê ye ku me daxuyanî lê xist alert() di hundurê fonksiyonek vegerê de ji bo rêbazê slideToggle(). Ger hûn vê kodê biceribînin, piştî ku bandora guheztina slide qediya dê peyama hişyariyê xuya bibe.
<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>Bi heman awayî, hûn dikarin defifonksiyonên bangback nite ji bo rêbazên din ên bandora jQuery, wek show(), hide(), fadeIn(), fadeOut(), animate(), û hwd.
<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>Ger hûn koda nimûneya li jor biceribînin, hûn ê ji her babetekê carekê du caran heman peyama hişyariyê bistînin <h1> e <p>, piştî ku li ser bişkojka çalak bike.
BlogInnovazione.it
Coveware ji hêla Veeam ve dê berdewam bike ku karûbarên bersivdayina bûyera xerckirina sîber peyda bike. Coveware dê kapasîteyên dadwerî û sererastkirinê pêşkêşî bike…
Lênêrîna pêşbînîkirî di sektora neft û gazê de, bi nêzîkatiyek nûjen û çalak a rêveberiya nebatê şoreşek dike.…
CMA ya Keyaniya Yekbûyî di derbarê reftarên Big Tech de di bazara îstîxbarata çêkirî de hişyariyek derxist. Va…
Biryarnameya "Xalên Kesk", ku ji hêla Yekîtiya Ewropî ve ji bo zêdekirina karbidestiya enerjiyê ya avahiyan hatî damezrandin, pêvajoya xwe ya qanûnî bi…