Бул макалада биз анимацияларды түзүү үчүн ар кандай JQuery ыкмаларын кантип колдонууну көрөбүз.
hide
() Жана show
()hide() ыкмасы жөн гана стилди сапка орнотот display: none
тандалган нерселер үчүн. Тескерисинче, show() ыкмасы дисплей касиеттерин калыбына келтирет.
Келгиле, бир мисал карап көрөлү:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>
Биринчи учурда, баскычты басканда абзац жашырылат (hide-btn
), экинчи учурда абзац баскычты басканда ((show-btn
).
Сиз ошондой эле узактык параметрин көрсөтүүгө болот, шоуну жандандыруу жана белгилүү бир убакытка эффектти жашыруу.
Узактыгы алдын ала саптардын бирин колдонуу менен көрсөтүлүшү мүмкүнdefiтук-тук-тук 'slow'
o 'fast'
, же бир нече миллисекундда, көбүрөөк тактык үчүн; жогорку маанилер жайыраак анимацияларды көрсөтөт.
<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>
Сап алдын алаdefiNita 'fast'
сап, ал эми 200 миллисекунд узактыгын көрсөтөт 'slow'
600 миллисекунддун узактыгын көрсөтөт.
функциясын белгилей алабыз callback
ыкма аяктагандан кийин аткарылат show()
же 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>
jQuery ыкмасы toggle()
буюмдарды көрсөтүү же жашыруу, эгерде нерсе алгач көрсөтүлсө, ал жашырылат; тескерисинче, эгер жашырылган болсо, ал көрсөтүлөт (иш жүзүндө анын көрүнүшүн өчүрөт).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>
Ошо сыяктуу эле, сиз параметрди көрсөтүүгө болот duration
ыкмасы үчүн toggle()
, ыкмалар сыяктуу көрүнгөн жана жашыруун ортосундагы өтүүнү жандандыруу үчүн 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>
Ошо сыяктуу эле, сиз да функциясын белгилей аласыз callback
ыкмасы үчүн 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()
Сиз jQuery ыкмаларын колдоно аласыз fadeIn()
e fadeOut()
HTML элементтерин көрсөтүү же жашыруу, акырындык менен алардын тунуктугун жогорулатуу же азайтуу жана өчүп калуу эффектин түзүү.
<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>
Башка jQuery эффекттеринин ыкмалары сыяктуу эле, сиз ыкмалар үчүн узактыгын же ылдамдыгын параметрин тандай аласыз fadeIn()
e fadeOut()
, өчүп калуу узактыгын көзөмөлдөө үчүн. Узактыгы алдын ала саптардын бирин колдонуу менен көрсөтүлүшү мүмкүнdefiтук-тук-тук 'slow'
o 'fast'
, же бир нече миллисекундда; жогорку маанилер жайыраак анимацияларды көрсөтөт.
<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>
ыкмаларынын таасири fadeIn()
/ fadeOut()
Бул окшош show()
/ hide()
, бирок методдордон айырмаланып show()
/ hide()
, биринчиси максаттуу элементтердин тунук эместигин гана жандандырат жана алардын өлчөмүн жандандырбайт.
Ошондой эле функцияны белгилей аласыз callback
ыкмалары аяктагандан кийин иштетүү 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()
jQuery ыкмасы fadeToggle()
тандалган элементтерди алардын тунуктугун анимациялоо менен көрсөтөт же жашырат, эгерде элемент алгач көрсөтүлсө, ал өчүп калат; эгерде ал жашырылган болсо, ал өчүп калат (б.а. өчүп калуу эффектин өчүрүү).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
Метод үчүн өмүр бою параметрин да көрсөтө аласыз fadeToggle()
ыкмаларына келсек fadeIn()
/ fadeOut()
, Өнүгүү анимациясынын узактыгын же ылдамдыгын көзөмөлдөө үчүн.
<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>
fadeToggle() методу да функцияны көрсөтүү мүмкүнчүлүгүнө ээ 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()
jQuery ыкмасы fadeTo()
ал ыкмага окшош fadeIn()
, бирок ыкмадан айырмаланып fadeIn()
, ыкма fadeTo()
элементтерди тунуктуулуктун белгилүү бир деңгээлине чейин аралаштырууга мүмкүндүк берет.
$(selector).fadeTo(speed, opacity, callback);
Керектүү параметр opacity
0 жана 1 ортосундагы сан боло турган максаттуу элементтердин акыркы тунуктугун аныктайт. Параметр duration
o speed
анимациянын өчүшүнүн узактыгын аныктаган бул ыкма үчүн да талап кылынат.
<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()
jQuery ыкмасы slideUp()
e slideDown()
HTML элементтеринин бийиктигин акырындык менен азайтуу же көбөйтүү (б.а. аларды өйдө же ылдый жылдыруу) аркылуу жашыруу же көрсөтүү үчүн колдонулат.
<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>
Башка jQuery эффекттеринин ыкмалары сыяктуу эле, сиз ыкмалар үчүн узактыгы же ылдамдык параметрин тандай аласыз slideUp()
e slideDown()
слайддын анимациясынын узактыгын көзөмөлдөө. Узактыгы алдын ала саптардын бирин колдонуу менен көрсөтүлүшү мүмкүнdefiтук-тук-тук 'slow'
o 'fast'
, же бир нече миллисекундда; жогорку маанилер жайыраак анимацияларды көрсөтөт.
<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>
Метод аяктагандан кийин аткаруу үчүн кайра чакыруу функциясын да белгилей аласыз 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()
jQuery ыкмасы slideToggle()
тандалган элементтерди алардын бийиктигин жандандыруу аркылуу көрсөтүү же жашыруу, эгерде элемент башында көрсөтүлсө, ал өйдө жылдырылат; эгер жашырылса, ал ылдый жылдырылат, башкача айтканда slideUp()
e slideDown()
.
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>
Ошо сыяктуу эле, сиз ыкма үчүн өмүр параметрин көрсөтө аласыз slideToggle()
кантип 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>
Ошо сыяктуу эле, сиз ыкма үчүн кайра чакыруу функциясын да белгилей аласыз 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()
jQuery ыкмасы animate()
ал жеке анимацияларды түзүү үчүн колдонулат. Ыкма animate()
сыяктуу сандык CSS касиеттерин жандандыруу үчүн колдонулат width
, height
, margin
, padding
, opacity
, top
, left
жана башкалар бирок сандык эмес касиеттери сыяктуу color
o background-color
аларды негизги jQuery функцияларын колдонуу менен анимациялоого болбойт.
Методдун негизги синтаксиси animate()
ал төмөнкүдөй:
$(selector).animate({ properties }, duration, callback);
Методдун параметрлери animate()
төмөнкү мааниге ээ:
'slow'
o 'fast'
, же бир нече миллисекундда; жогорку маанилер жайыраак анимацияларды көрсөтөт.Төмөндө ыкманын жөнөкөй мисалы болуп саналат animate()
баскычты басканда сүрөттү баштапкы абалынан оңго 300 пикселге жандандырат.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
Методду колдонуу менен бир эле учурда элементтин бир нече касиеттерин жанданта аласыз animate()
. Бардык касиеттер бир эле учурда эч кандай кечиктирбестен жандырылды.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
Ошондой эле, jQuery'дин бириктирүү функциясын колдонуп, кезекте бир элементтин бир нече касиеттерин жекече жанданта аласыз.
Төмөнкү мисал кезектеги же чынжырланган jQuery анимациясын көрсөтөт, мында ар бир анимация элементтеги мурунку анимация аяктагандан кийин башталат. Келечектеги макалада бириктирүү функциясын көрөбүз.
<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>
Ошондой эле, мүмкүн defiанимацияланган касиеттер үчүн салыштырмалуу баалуулуктар. Эгерде маани префикс менен көрсөтүлсө +=
o -=
, максаттуу маани мүлктүн учурдагы наркынан көрсөтүлгөн санды кошуу же кемитүү жолу менен эсептелет.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>
Сандык маанилерден тышкары, ар бир касиет саптарды кабыл алат 'show'
, 'hide'
e 'toggle'
. Бул сиз жөн гана мүлктү анын учурдагы наркынан баштапкы баасына жана тескерисинче жандандыргыңыз келген кырдаалда абдан пайдалуу болот.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>
stop()
jQuery ыкмасы stop()
Учурдагы jQuery анимацияларын же тандалган элементтердеги эффекттерди аягына чейин иштетүүнү токтотуу үчүн колдонулат.
Методдун негизги синтаксиси stop()
jQuery менен берилиши мүмкүн:
$(selector).stop(stopAll, goToEnd);
Жогорудагы синтаксистеги параметрлер төмөнкүдөй мааниге ээ:
false
, бул учурдагы анимация гана токтотулат, кезектеги калган анимациялар кийинчерээк аткарылат дегенди билдирет.false
.Бул жерде ыкманы көрсөткөн жөнөкөй мисал stop()
баскычты чыкылдатуу менен анимацияны баштоо жана токтотуу мүмкүн болгон реалдуу аракетте.
<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>
Бул ыкманын дагы бир мисалы, эгер сиз баскычты кайра бассаңызSlide Toggle
” анимацияны баштагандан кийин, бирок ал аягына чыга электе, анимация дароо сакталган башталгыч чекиттен карама-каршы багытта башталат.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>
Анимацияланган курсор эффектин түзүүдө, эң көп кездешүүчү көйгөйлөрдүн бири, сиз чычкан курсорун тез коюп жана алып салганда, кезекте турган бир нече анимациялар болуп саналат. Эмне үчүн мындай кырдаалда, mouseenter
GLI mouseleave
анимация аяктаганга чейин окуялар тез эле өчүрүлөт. Бул көйгөйдү болтурбоо жана жагымдуу жана жылмакай кыймылдаткыч эффектин түзүү үчүн сиз кошо аласыз stop(true, true)
ыкма чынжырына, мисалы:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>
JavaScript билдирүүлөрү саптан сапка аткарылат. Бирок, jQuery эффектин бүтүрүү үчүн бир аз убакыт талап кылынгандыктан, кийинки саптын коду мурунку эффект иштеп турганда иштеши мүмкүн. Мунун алдын алуу үчүн, jQuery ар бир эффект ыкмасы үчүн кайра чалуу функциясын камсыз кылат.
Кайра чалуу функциясы эффект аяктагандан кийин иштей турган функция. Кайра чалуу функциясы эффекттин методдоруна аргумент катары берилет жана алар адатта акыркы ыкма аргументи катары көрүнөт. Мисалы, jQuery эффект ыкмасынын негизги синтаксиси slideToggle()
төмөнкүдөй белгилениши мүмкүн болгон кайра чалуу функциясы менен:
$(selector).slideToggle(duration, callback);
Биз билдирүүлөрдү жайгаштырган төмөнкү мисалды карап көрөлү slideToggle()
e alert()
биринин жанында. Эгер сиз бул кодду сынап көрсөңүз, слайдды которуштуруу эффектинин аякташын күтпөстөн, которуштуруу баскычын басканда дароо пайда болот.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>
Бул жерде биз билдирүү киргизген мурунку мисалдын өзгөртүлгөн версиясы alert()
метод үчүн кайра чакыруу функциясынын ичинде slideToggle()
. Бул кодду колдонуп көрсөңүз, слайдды которуштуруу эффектиси аяктагандан кийин эскертүү билдирүүсү пайда болот.
<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>
Ошо сыяктуу эле, мүмкүн defiсыяктуу башка jQuery эффекти ыкмалары үчүн кайра чалуу функцияларын бүтүрүңүз show()
, hide()
, fadeIn()
, fadeOut()
, animate()
, жана башкалар.
<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>
Эгер сиз жогорудагы үлгү кодун колдонуп көрсөңүз, ар бир нерсеге эки жолу бир эле эскертүү билдирүүсүн аласыз <h1>
e <p>
, активдештирүү баскычын чыкылдаткандан кийин.
BlogInnovazione.it
Veeam тарабынан Coveware кибер опузалап инциденттерге жооп берүү кызматтарын көрсөтүүнү улантат. Coveware криминалистика жана ремедиация мүмкүнчүлүктөрүн сунуштайт ...
Болжолдуу тейлөө заводду башкарууга инновациялык жана жигердүү мамиле кылуу менен мунай жана газ секторун революция кылып жатат.…
Улуу Британиянын CMA жасалма интеллект рыногунда Big Tech жүрүм-туруму жөнүндө эскертүү берди. Ал жерде…
Имараттардын энергетикалык натыйжалуулугун жогорулатуу үчүн Европа Биримдиги тарабынан иштелип чыккан "Case Green" Декрети өзүнүн мыйзам чыгаруу процессин аяктады ...