Ninu nkan yii a yoo rii bii o ṣe le lo awọn ọna JQuery oriṣiriṣi fun ṣiṣẹda awọn ohun idanilaraya.
hide() Ati show()Ọna Ìbòmọlẹ () nìkan ṣeto ara inu laini display: none fun awọn ohun elo ti o yan. Ni idakeji, ọna ifihan () ṣe atunṣe awọn ohun-ini ifihan.
Jẹ ki a wo apẹẹrẹ:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Ninu ọran akọkọ paragira naa ti farapamọ nigbati o tẹ bọtini naa (hide-btn), ninu ọran keji paragira naa han nigbati o tẹ bọtini naa (show-btn).
O tun le pato paramita iye akoko, lati jẹ ki ifihan ati ipa ipamo ṣe ere idaraya fun akoko kan.
Awọn akoko le jẹ pato nipa lilo ọkan ninu awọn gbolohun ọrọ iṣaajudefinite 'slow' o 'fast', tabi ni nọmba kan ti milliseconds, fun o tobi konge; awọn iye ti o ga julọ tọkasi awọn ohun idanilaraya losokepupo.
<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>Okun Predefinita 'fast' tọkasi a iye ti 200 milliseconds, nigba ti okun 'slow' tọkasi iye akoko ti 600 milliseconds.
A le pato iṣẹ kan ti callback lati ṣiṣẹ lẹhin ilana naa ti pari show() tabi 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>Ọna jQuery toggle() fihan tabi tọju awọn nkan bii ti nkan naa ba han lakoko, yoo farapamọ; idakeji, ti o ba ti pamọ, o yoo wa ni han (besikale o alternates awọn oniwe- hihan).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Bakanna, o le pato awọn paramita duration fun ọna toggle(), ni iru kan ọna bi lati animate awọn orilede laarin han ati ki o farasin, bi awọn ọna 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>Bakanna, o tun le pato iṣẹ kan ti callback fun ọna 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()O le lo awọn ọna jQuery fadeIn()e fadeOut() lati ṣafihan tabi tọju awọn eroja HTML, diėdiė npo si tabi dinku opacity wọn ati ṣiṣẹda ipa ipadanu.
<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>Bii awọn ọna ipa jQuery miiran, o le ni yiyan pato iye akoko tabi paramita iyara fun awọn ọna naa fadeIn()e fadeOut(), ki o le ṣakoso iye akoko ipare naa. Awọn akoko le jẹ pato nipa lilo ọkan ninu awọn gbolohun ọrọ iṣaajudefinite 'slow' o 'fast', tabi ni nọmba kan ti milliseconds; awọn iye ti o ga julọ tọkasi awọn ohun idanilaraya losokepupo.
<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>ipa ti awọn ọna fadeIn() / fadeOut() O jẹ iru si show() / hide(), ṣugbọn ko dabi awọn ọna show() / hide(), awọn tele nikan animate awọn opacity ti awọn afojusun eroja ati ki o ko animate wọn iwọn.
O tun le pato iṣẹ kan callback lati ṣiṣẹ lẹhin ti awọn ọna ti pari 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()Ọna jQuery fadeToggle() ṣe afihan tabi tọju awọn eroja ti a yan nipa didimu ailagbara wọn bii pe ti nkan naa ba han lakoko, yoo rọ; ti o ba ti farapamọ, yoo han pe o rẹwẹsi (ie awọn ipa ipare yi pada).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>O tun le pato paramita iye akoko fun ọna naa fadeToggle() bi fun awọn ọna fadeIn() / fadeOut(), lati ṣakoso iye akoko tabi iyara ti ere idaraya ipare.
<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>Ọna fadeToggle () tun ni agbara lati pato iṣẹ kan 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()Ọna jQuery fadeTo() o jẹ iru si ọna naa fadeIn(), ṣugbọn ko dabi ọna naa fadeIn(), ọna fadeTo() o faye gba o lati parapo eroja soke si kan awọn ipele ti opacity.
$(selector).fadeTo(speed, opacity, callback);Awọn dandan paramita opacity pato opacity ti o kẹhin ti awọn eroja ibi-afẹde eyiti o le jẹ nọmba laarin 0 ati 1. paramita naa duration o speed tun nilo fun ọna yii eyiti o ṣalaye iye akoko ipare ere idaraya.
<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()Ọna jQuery slideUp() e slideDown() wọn lo lati tọju tabi ṣafihan awọn eroja HTML nipa idinku diẹdiẹ tabi jijẹ giga wọn (ie sisun wọn soke tabi isalẹ).
<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>Bii awọn ọna ipa jQuery miiran, o le ni yiyan pato iye akoko tabi paramita iyara fun awọn ọna naa slideUp() e slideDown() lati šakoso awọn iye akoko ti awọn ifaworanhan iwara. Awọn akoko le jẹ pato nipa lilo ọkan ninu awọn gbolohun ọrọ iṣaajudefinite 'slow' o 'fast', tabi ni nọmba kan ti milliseconds; awọn iye ti o ga julọ tọkasi awọn ohun idanilaraya losokepupo.
<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>O tun le pato iṣẹ ipe pada lati ṣiṣẹ lẹhin ọna ti pari 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()Ọna jQuery slideToggle() fihan tabi tọju awọn nkan ti o yan nipa gbigbe iga wọn ṣiṣẹ gẹgẹbi ohun ti o ba han ni ibẹrẹ, yoo yi lọ soke; ti o ba farapamọ, yoo yi lọ si isalẹ, ie awọn iyipada laarin awọn ọna slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Bakanna, o le pato paramita iye akoko fun ọna naa slideToggle() wá 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>Bakanna, o tun le pato iṣẹ ipe pada fun ọna naa 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()Ọna jQuery animate() ti wa ni lo lati ṣẹda aṣa awọn ohun idanilaraya. Ọna naa animate() ti wa ni lo lati animate nomba CSS-ini, gẹgẹ bi awọn width, height, margin, padding, opacity, top, left ati be be lo. ṣugbọn ti kii-nọmba-ini bi color o background-color wọn ko le ṣe ere idaraya nipa lilo iṣẹ ṣiṣe jQuery ipilẹ.
Awọn ipilẹ sintasi ti awọn ọna animate() o jẹ atẹle:
$(selector).animate({ properties }, duration, callback);Awọn paramita ti ọna animate() ni awọn itumo wọnyi:
'slow' o 'fast', tabi ni nọmba kan ti milliseconds; awọn iye ti o ga julọ tọkasi awọn ohun idanilaraya losokepupo.Ni isalẹ jẹ apẹẹrẹ ti o rọrun ti ọna naa animate() eyiti o ṣe ere aworan kan lati ipo atilẹba rẹ si awọn piksẹli 300 ọtun lori tẹ bọtini.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>O tun le ṣe ere idaraya awọn ohun-ini pupọ ti nkan kan papọ ni ẹẹkan ni lilo ọna naa animate(). Gbogbo awọn ohun-ini ni ere idaraya nigbakanna laisi idaduro eyikeyi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>O tun le ṣe ere awọn ohun-ini pupọ ti ẹya kan ni ẹyọkan ni ẹyọkan, ni isinyi kan nipa lilo iṣẹ ṣiṣe pQuery.
Apẹẹrẹ atẹle n ṣe afihan iwara jQuery ti isinyi tabi ẹwọn, nibiti ere idaraya kọọkan yoo bẹrẹ ni kete ti ere idaraya ti tẹlẹ lori eroja ti pari. A yoo rii iṣẹ isọdọkan ni nkan iwaju.
<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>O tun ṣee ṣe defiawọn iye ibatan nish fun awọn ohun-ini ere idaraya. Ti iye kan ba pato pẹlu ìpele += o -=, iye ibi-afẹde jẹ iṣiro nipasẹ fifi kun tabi iyokuro nọmba pàtó kan lati iye ohun-ini lọwọlọwọ.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ni afikun si awọn iye nọmba, ohun-ini kọọkan le gba awọn gbolohun ọrọ 'show', 'hide' e 'toggle'. Yoo wulo pupọ ni ipo kan nibiti o rọrun fẹ lati ṣe ere ohun-ini lati iye lọwọlọwọ rẹ si iye ibẹrẹ ati ni idakeji.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Ọna jQuery stop() ni a lo lati da awọn ohun idanilaraya jQuery ṣiṣẹ lọwọlọwọ tabi awọn ipa lori awọn eroja ti o yan ṣaaju ipari.
Awọn ipilẹ sintasi ti awọn ọna stop() jQuery le ṣee fun pẹlu:
$(selector).stop(stopAll, goToEnd);Awọn paramita inu sintasi loke ni awọn itumọ wọnyi:
false, Eyi tumọ si pe ere idaraya lọwọlọwọ nikan ni yoo da duro, iyoku awọn ere idaraya ti isinyi yoo ṣiṣẹ ni atẹle.false.Eyi ni apẹẹrẹ ti o rọrun ti o ṣe afihan ọna naa stop() ni iṣẹ gidi nibiti o le bẹrẹ ati da ere idaraya duro lori tẹ bọtini.
<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>Eyi ni apẹẹrẹ miiran ti ọna yii nibiti o ba tẹ “Slide Toggle” lẹhin ti o bẹrẹ ere idaraya ṣugbọn ṣaaju ki o to pari, ere idaraya yoo bẹrẹ lẹsẹkẹsẹ ni idakeji lati aaye ibẹrẹ ti o fipamọ.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Nigbati o ba ṣẹda ipa ikopa ti ere idaraya, ọkan ninu awọn iṣoro ti o wọpọ julọ ti o le ba pade ni awọn ohun idanilaraya ti ila lọpọlọpọ, nigbati o yara gbe ati yọ kọsọ Asin kuro. Nitoripe ni ipo yii, mouseenter gli mouseleave Awọn iṣẹlẹ nfa ni kiakia ṣaaju ki ere idaraya to pari. Lati yago fun isoro yi ki o si ṣẹda kan dara ati ki o dan rababa ipa, o le fi stop(true, true)si ọna pq, bi eyi:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Awọn alaye JavaScript jẹ ṣiṣe laini nipasẹ laini. Sibẹsibẹ, niwọn igba ti ipa jQuery gba akoko diẹ lati pari, koodu laini atẹle le ṣiṣẹ lakoko ti ipa iṣaaju ṣi nṣiṣẹ. Lati ṣe idiwọ eyi lati ṣẹlẹ, jQuery pese iṣẹ ipe pada fun ọna ipa kọọkan.
Išẹ ipe pada jẹ iṣẹ kan ti o nṣiṣẹ ni kete ti ipa ba ti pari. Iṣẹ ipe pada ti kọja bi ariyanjiyan si awọn ọna ipa, ati pe wọn han ni igbagbogbo bi ariyanjiyan ti o kẹhin ti ọna naa. Fun apẹẹrẹ, sintasi ipilẹ ti ọna ipa jQuery slideToggle() pẹlu iṣẹ ipe pada ti o le ṣe pato bi atẹle:
$(selector).slideToggle(duration, callback);Gbé àpẹẹrẹ tí ó tẹ̀ lé e yìí yẹ̀ wò níbi tí a ti fi àwọn ìtọ́ni sílò slideToggle()e alert()ọkan lẹgbẹẹ ekeji. Ti o ba gbiyanju koodu yii, ikilọ naa yoo han lẹsẹkẹsẹ lẹhin titẹ bọtini yiyi laisi iduro fun ipa toggle ifaworanhan lati pari.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Ati pe eyi ni ẹya ti a tunṣe ti apẹẹrẹ iṣaaju nibiti a ti fi alaye sii alert() inu iṣẹ ipe pada fun ọna naa slideToggle(). Ti o ba gbiyanju koodu yii, ifiranṣẹ ikilọ yoo han ni kete ti ipa toggle ifaworanhan ti pari.
<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>Bakanna, o le defiawọn iṣẹ ipe nite fun awọn ọna ipa jQuery miiran, gẹgẹbi show(), hide(), fadeIn(), fadeOut(), animate(), abbl.
<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>Ti o ba gbiyanju koodu apẹẹrẹ loke, iwọ yoo rii ifiranṣẹ ikilọ kanna lemeji ni ẹẹkan fun ohun kan <h1> e <p>, lẹhin titẹ bọtini mu ṣiṣẹ.
BlogInnovazione.it
Ni ọjọ Aarọ to kọja, Awọn akoko Iṣowo kede adehun kan pẹlu OpenAI. FT ṣe iwe-aṣẹ iwe-akọọlẹ agbaye rẹ…
Awọn miliọnu eniyan sanwo fun awọn iṣẹ ṣiṣanwọle, san awọn idiyele ṣiṣe alabapin oṣooṣu. O jẹ ero ti o wọpọ pe o…
Coveware nipasẹ Veeam yoo tẹsiwaju lati pese awọn iṣẹ esi iṣẹlẹ ikọlu cyber. Coveware yoo funni ni awọn oniwadi ati awọn agbara atunṣe…
Itọju isọtẹlẹ jẹ iyipada ti eka epo & gaasi, pẹlu imotuntun ati ọna imudani si iṣakoso ọgbin.…