En ĉi tiu artikolo ni vidos kiel uzi malsamajn JQuery-metodojn por generi kuraĝigojn.
hide() Kaj show()La metodo hide() simple metas la stilon enlinian display: none por elektitaj eroj. Male, la metodo show() restarigas la ekranajn proprietojn.
Ni vidu ekzemplon:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>En la unua kazo la alineo estas kaŝita kiam vi alklakas la butonon (hide-btn), en la dua kazo la alineo montriĝas kiam vi alklakas la butonon (show-btn).
Vi ankaŭ povas specifi la daŭro-parametron, por animi la spektaklon kaj kaŝi efikon dum tempodaŭro.
Daŭroj povas esti specifitaj uzante unu el la antaŭŝnurojdefiNite 'slow' o 'fast', aŭ en kelkaj milisekundoj, por pli granda precizeco; pli altaj valoroj indikas pli malrapidajn animaciojn.
<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>La kordo predefiknabineto 'fast' indikas daŭron de 200 milisekundoj, dum la ĉeno 'slow' indikas la daŭron de 600 milisekundoj.
Ni povas specifi funkcion de callback esti efektivigita post metodokompletigo show() aŭ 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>La metodo jQuery toggle() montri aŭ kaŝi erojn tiel, ke se la objekto estas komence montrata, ĝi estos kaŝita; male se ĝi estas kaŝita, ĝi estos montrata (praktike ŝanĝas sian videblecon).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Simile, vi povas specifi la parametron duration por la metodo toggle(), en tia maniero por animi la transiron inter videbla kaj kaŝita, kiel metodoj 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>Simile, vi ankaŭ povas specifi funkcion de callback por la metodo 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()Vi povas uzi jQuery-metodojn fadeIn()e fadeOut() por montri aŭ kaŝi HTML-elementojn, iom post iom pliigante aŭ malpliigante ilian opakecon kaj kreante forvelkan efikon.
<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>Kiel aliaj jQuery-efektaj metodoj, vi povas laŭvole specifi daŭron aŭ rapidan parametron por metodoj fadeIn()e fadeOut(), por kontroli la daŭron de la fade. Daŭroj povas esti specifitaj uzante unu el la antaŭŝnurojdefiNite 'slow' o 'fast', aŭ en kelkaj milisekundoj; pli altaj valoroj indikas pli malrapidajn animaciojn.
<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>la efiko de la metodoj fadeIn() / fadeOut() Ĝi similas al show() / hide(), sed male al la metodoj show() / hide(), la unuaj nur animas la opakecon de la celelementoj kaj ne animas ilian grandecon.
Ankaŭ vi povas specifi funkcion de callback kuri post kiam la metodoj finiĝas 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()La metodo jQuery fadeToggle() montras aŭ kaŝas elektitajn elementojn animante ilian opakecon tiel ke se la elemento estas komence montrata, ĝi estos forvelkiĝinta; se ĝi estis kaŝita, ĝi forvelkos (t.e. ŝanĝu la fadefikon).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Vi ankaŭ povas specifi la vivdaŭran parametron por la metodo fadeToggle() koncerne la metodojn fadeIn() / fadeOut(), por kontroli la daŭron aŭ rapidecon de la fade-animacio.
<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>La fadeToggle() metodo ankaŭ havas la kapablon specifi funkcion 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()La metodo jQuery fadeTo() ĝi similas al la metodo fadeIn(), sed male al la metodo fadeIn(), la metodo fadeTo() permesas vin miksi elementojn ĝis certa nivelo de opakeco.
$(selector).fadeTo(speed, opacity, callback);La bezonata parametro opacity specifas la finan opakecon de la celelementoj kiuj povas esti nombro inter 0 kaj 1. La parametro duration o speed ĝi ankaŭ estas postulata por ĉi tiu metodo, kiu specifas la daŭron de la animacia fado.
<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()La metodo jQuery slideUp() e slideDown() estas uzataj por kaŝi aŭ montri HTML-elementojn iom post iom malpliigante aŭ pliigante ilian altecon (t.e. ruligante ilin supren aŭ malsupren).
<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>Kiel aliaj jQuery-efektaj metodoj, vi povas laŭvole specifi daŭron aŭ rapidan parametron por la metodoj slideUp() e slideDown() por kontroli la daŭron de la glita animacio. Daŭroj povas esti specifitaj uzante unu el la antaŭŝnurojdefiNite 'slow' o 'fast', aŭ en kelkaj milisekundoj; pli altaj valoroj indikas pli malrapidajn animaciojn.
<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>Vi ankaŭ povas specifi revokan funkcion por ekzekuti post metodokompletigo 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()La metodo jQuery slideToggle() montri aŭ kaŝi elektitajn elementojn animante ilian altecon tiel ke se la elemento estas komence montrata, ĝi estos rulumita supren; se kaŝite, ĝi estos rulumita malsupren, t.e. ŝanĝas inter metodoj slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Simile, vi povas specifi la vivdaŭran parametron por la metodo slideToggle() venu 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>Simile, vi ankaŭ povas specifi revokan funkcion por la metodo 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()La metodo jQuery animate() ĝi estas uzata por krei kutimajn kuraĝigojn. La metodo animate() estas uzata por vigligi nombrajn CSS-ecojn, kiel ekzemple width, height, margin, padding, opacity, top, left ktp. sed ne-nombraj ecoj kiel color o background-color ili ne povas esti viglaj per baza jQuery-funkcio.
La baza sintakso de la metodo animate() ĝi estas la sekvanta:
$(selector).animate({ properties }, duration, callback);Metodaj parametroj animate() havas la jenajn signifojn:
'slow' o 'fast', aŭ en kelkaj milisekundoj; pli altaj valoroj indikas pli malrapidajn animaciojn.Malsupre estas simpla ekzemplo de la metodo animate() kiu animas bildon de sia originala pozicio dekstre je 300 pikseloj ĉe butonklako.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Vi ankaŭ povas animi plurajn ecojn de elemento samtempe uzante la metodon animate(). Ĉiuj propraĵoj estis viglaj samtempe sen prokrasto.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Vi ankaŭ povas vigligi plurajn ecojn de elemento unuope unuope, en vico uzante la kunligan funkcion de jQuery.
La sekva ekzemplo montras vicon aŭ ĉenitan jQuery-animacion, kie ĉiu kuraĝigo komenciĝos post kiam la antaŭa animacio sur la elemento finiĝos. Ni vidos la kunligan funkcion en estonta artikolo.
<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>Ankaŭ eblas defifinaj relativaj valoroj por viglaj propraĵoj. Se valoro estas specifita per prefikso += o -=, la celvaloro estas kalkulita per aldonado aŭ subtraho de la specifita nombro de la nuna valoro de la posedaĵo.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Krom nombraj valoroj, ĉiu posedaĵo povas akcepti ĉenojn 'show', 'hide' e 'toggle'. Ĝi estos tre utila en situacio kie vi nur volas vigligi la posedaĵon de ĝia nuna valoro ĝis ĝia komenca valoro kaj inverse.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()La metodo jQuery stop() estas uzata por ĉesigi nuntempe ruli jQuery-animaciojn aŭ efikojn sur elektitaj elementoj antaŭ kompletigo.
La baza sintakso de la metodo stop() jQuery povas esti donita per:
$(selector).stop(stopAll, goToEnd);La parametroj en ĉi-supra sintakso havas la jenajn signifojn:
false, ĉi tio signifas, ke nur la nuna animacio estos ĉesigita, la resto de la kuraĝigoj en la vico estos ekzekutita poste.false.Jen simpla ekzemplo pruvanta la metodon stop() en reala ago, kie vi povas komenci kaj haltigi la animacion per butonklako.
<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>Jen alia ekzemplo de ĉi tiu metodo kie se vi klakas la butonon denoveSlide Toggle” post komenci la animacion sed antaŭ ol ĝi finiĝos, la animacio tuj komenciĝos en la kontraŭa direkto de la konservita deirpunkto.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Kiam vi kreas la viglan ŝveban efikon, unu el la plej oftaj problemoj, kiujn vi povas renkonti, estas pluraj kuraĝigoj vicigitaj, kiam vi rapide metas kaj forigas la muskursonon. Kial, en ĉi tiu situacio, mouseenter la mouseleave eventoj estas pafitaj rapide antaŭ ol la animacio finiĝas. Por eviti ĉi tiun problemon kaj krei belan kaj glatan ŝveban efikon, vi povas aldoni stop(true, true)al la metodoĉeno, tiel:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript deklaroj estas ekzekutitaj linio post linio. Tamen, ĉar la jQuery-efiko bezonas iom da tempo por finiĝi, la kodo de la sekva linio povus ruliĝi dum la antaŭa efiko ankoraŭ funkcias. Por eviti ke tio okazu, jQuery provizas revokan funkcion por ĉiu efikmetodo.
Revoka funkcio estas funkcio kiu funkcias post kiam la efiko estas kompleta. La revokfunkcio estas transdonita kiel argumento al la metodoj de la efiko, kaj ili kutime aperas kiel la lasta metodoargumento. Ekzemple, la baza sintakso de la jQuery efikmetodo slideToggle() kun revokfunkcio kiu povas esti precizigita jene:
$(selector).slideToggle(duration, callback);Konsideru la sekvan ekzemplon kie ni metis la deklarojn slideToggle()e alert()unu apud la alia. Se vi provas ĉi tiun kodon, la atentigo aperos tuj post klako de la baskulo-butono sen atendi la finiĝon de la glita baskulo.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Kaj jen la modifita versio de la antaŭa ekzemplo, kie ni enmetis la deklaron alert() ene de revokfunkcio por la metodo slideToggle(). Se vi provas ĉi tiun kodon, la averta mesaĝo aperos post la finiĝo de la glita baskuliga efiko.
<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>Same, vi povas defifini callback funkcioj por la aliaj jQuery efekto metodoj, kiel ekzemple show(), hide(), fadeIn(), fadeOut(), animate(), ktp.
<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>Se vi provas la ekzemplan kodon supre, vi ricevos la saman avertan mesaĝon dufoje unufoje per ero <h1> e <p>, post klako sur la aktivigi butonon.
BlogInnovazione.it
Prognoza prizorgado revolucias la petrolon kaj gasan sektoron, kun noviga kaj iniciatema aliro al plantadministrado...
La UK CMA publikigis averton pri la konduto de Big Tech en la merkato de artefarita inteligenteco. Tie…
La Dekreto "Verdaj Domoj", formulita de Eŭropa Unio por plibonigi la energi-efikecon de konstruaĵoj, finis sian leĝdonan procezon per...
La jarraporto de Casaleggio Associati pri Ekomerco en Italio prezentita. Raporto titolita "AI-Komerco: la limoj de Ekomerco kun Artefarita Inteligenteco"....