Ushbu maqolada biz animatsiyalarni yaratish uchun turli xil JQuery usullaridan qanday foydalanishni ko'rib chiqamiz.
hide() Va show()hide() usuli oddiygina uslubni inline o'rnatadi display: none tanlangan elementlar uchun. Aksincha, show() usuli displey xususiyatlarini tiklaydi.
Keling, misolni ko'rib chiqaylik:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Birinchi holda, tugmani bosganingizda paragraf yashirin bo'ladi (hide-btn), ikkinchi holatda, tugmani bosganingizda paragraf ko'rsatiladi (show-btn).
Shuningdek, ko'rsatuvni jonlantirish va ma'lum vaqt davomida effektni yashirish uchun davomiylik parametrini ham belgilashingiz mumkin.
Davrlar oldingi satrlardan biri yordamida belgilanishi mumkindefinite 'slow' o 'fast', yoki kattaroq aniqlik uchun bir necha millisekundlarda; yuqori qiymatlar sekinroq animatsiyalarni ko'rsatadi.
<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>Ip oldindandefiperchin 'fast' satr esa 200 millisekundlik davomiylikni bildiradi 'slow' 600 millisekundlik davomiylikni bildiradi.
ning funktsiyasini belgilashimiz mumkin callback usul tugagandan so'ng bajarilishi kerak show() yoki 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 usuli toggle() elementlarni shunday ko'rsatish yoki yashirish, agar element dastlab ko'rsatilsa, u yashiriladi; aksincha, agar yashirin bo'lsa, u ko'rsatiladi (amalda uning ko'rinishini almashtiradi).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Xuddi shunday, siz parametrni belgilashingiz mumkin duration usuli uchun toggle(), usullar kabi ko'rinadigan va yashiringan o'tishni jonlantiradigan tarzda 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>Xuddi shunday, siz ham funktsiyani belgilashingiz mumkin callback usuli uchun 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()Siz jQuery usullaridan foydalanishingiz mumkin fadeIn()e fadeOut() HTML elementlarini ko'rsatish yoki yashirish, ularning shaffofligini asta-sekin oshirish yoki kamaytirish va o'chirish effektini yaratish.
<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>Boshqa jQuery effektlari usullari singari, siz ixtiyoriy ravishda usullar uchun vaqt yoki tezlik parametrini belgilashingiz mumkin fadeIn()e fadeOut(), pasayish davomiyligini nazorat qilish uchun. Davrlar oldingi satrlardan biri yordamida belgilanishi mumkindefinite 'slow' o 'fast', yoki bir necha millisekundlarda; yuqori qiymatlar sekinroq animatsiyalarni ko'rsatadi.
<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>usullarning ta'siri fadeIn() / fadeOut() ga o'xshaydi show() / hide(), lekin usullardan farqli o'laroq show() / hide(), birinchisi faqat maqsadli elementlarning shaffofligini jonlantiradi va ularning hajmini jonlantirmaydi.
ning funksiyasini ham belgilashingiz mumkin callback usullar tugallangandan keyin ishga tushirish 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 usuli fadeToggle() tanlangan elementlarni shaffofligini jonlantirish orqali ko'rsatadi yoki yashiradi, shunda element dastlab ko'rsatilsa, u o'chib ketadi; agar u yashiringan bo'lsa, u o'chadi (ya'ni, o'chirish effektini o'zgartiring).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Usul uchun umr bo'yi parametrini ham belgilashingiz mumkin fadeToggle() usullarga kelsak fadeIn() / fadeOut(), xiralashgan animatsiyaning davomiyligi yoki tezligini boshqarish uchun.
<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() metodi funksiyani belgilash imkoniyatiga ham ega 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 usuli fadeTo() usuliga o'xshaydi fadeIn(), lekin usuldan farqli o'laroq fadeIn(), usul fadeTo() elementlarni ma'lum bir shaffoflik darajasigacha aralashtirish imkonini beradi.
$(selector).fadeTo(speed, opacity, callback);Kerakli parametr opacity 0 va 1 oralig'idagi raqam bo'lishi mumkin bo'lgan maqsadli elementlarning yakuniy shaffofligini belgilaydi. Parametr duration o speed animatsiyaning o'chish davomiyligini belgilaydigan ushbu usul uchun ham talab qilinadi.
<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 usuli slideUp() e slideDown() HTML elementlarini balandligini asta-sekin kamaytirish yoki oshirish (ya'ni, ularni yuqoriga yoki pastga aylantirish) orqali yashirish yoki ko'rsatish uchun ishlatiladi.
<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>Boshqa jQuery effektlari usullari singari, siz ixtiyoriy ravishda usullar uchun vaqt yoki tezlik parametrini belgilashingiz mumkin slideUp() e slideDown() slayd animatsiyasining davomiyligini boshqarish uchun. Davrlar oldingi satrlardan biri yordamida belgilanishi mumkindefinite 'slow' o 'fast', yoki bir necha millisekundlarda; yuqori qiymatlar sekinroq animatsiyalarni ko'rsatadi.
<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>Shuningdek, usul tugallangandan so'ng bajarilishi uchun qayta qo'ng'iroq qilish funksiyasini ham belgilashingiz mumkin 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 usuli slideToggle() tanlangan elementlarni balandligini jonlantirish orqali ko'rsatish yoki yashirish, agar element dastlab ko'rsatilsa, u yuqoriga aylantiriladi; agar yashirin bo'lsa, u pastga aylantiriladi, ya'ni usullar o'rtasida almashinadi slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Xuddi shunday, siz usul uchun umr bo'yi parametrini belgilashingiz mumkin slideToggle() kelib 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>Xuddi shunday, siz usul uchun qayta qo'ng'iroq qilish funksiyasini ham belgilashingiz mumkin 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 usuli animate() u maxsus animatsiyalarni yaratish uchun ishlatiladi. Usul animate() kabi raqamli CSS xususiyatlarini jonlantirish uchun ishlatiladi width, height, margin, padding, opacity, top, left va boshqalar. lekin raqamli bo'lmagan xususiyatlar kabi color o background-color jQuery-ning asosiy funksiyalaridan foydalangan holda ularni jonlantirib bo'lmaydi.
Usulning asosiy sintaksisi animate() bu quyidagilar:
$(selector).animate({ properties }, duration, callback);Usul parametrlari animate() quyidagi ma'nolarga ega:
'slow' o 'fast', yoki bir necha millisekundlarda; yuqori qiymatlar sekinroq animatsiyalarni ko'rsatadi.Quyida usulning oddiy misoli keltirilgan animate() tugmani bosish orqali tasvirni asl holatidan o'ngga 300 pikselga jonlantiradi.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Bundan tashqari, usul yordamida bir vaqtning o'zida elementning bir nechta xususiyatlarini jonlantirishingiz mumkin animate(). Barcha xususiyatlar bir vaqtning o'zida hech qanday kechiktirmasdan jonlantirildi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Bundan tashqari, jQuery-ning birlashtirish funksiyasidan foydalanib, navbatda elementning bir nechta xususiyatlarini birma-bir jonlantirishingiz mumkin.
Quyidagi misol navbatga qo'yilgan yoki zanjirlangan jQuery animatsiyasini ko'rsatadi, bu erda har bir animatsiya elementdagi oldingi animatsiya tugagandan so'ng boshlanadi. Kelgusi maqolada birlashtirish funktsiyasini ko'rib chiqamiz.
<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>Bu ham mumkin defijonlantirilgan xususiyatlar uchun nisbiy qiymatlar. Agar qiymat prefiks bilan belgilangan bo'lsa += o -=, maqsadli qiymat ko'rsatilgan raqamni mulkning joriy qiymatidan qo'shish yoki ayirish yo'li bilan hisoblanadi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Raqamli qiymatlardan tashqari, har bir xususiyat satrlarni qabul qilishi mumkin 'show', 'hide' e 'toggle'. Mulkni hozirgi qiymatidan boshlang'ich qiymatiga va aksincha jonlantirmoqchi bo'lgan vaziyatda bu juda foydali bo'ladi.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()jQuery usuli stop() jQuery animatsiyalari yoki tanlangan elementlarga effektlarni tugallashdan oldin to'xtatish uchun ishlatiladi.
Usulning asosiy sintaksisi stop() jQuery quyidagi bilan berilishi mumkin:
$(selector).stop(stopAll, goToEnd);Yuqoridagi sintaksisdagi parametrlar quyidagi ma'nolarga ega:
false, bu faqat joriy animatsiya to'xtatilishini anglatadi, navbatdagi qolgan animatsiyalar keyinroq bajariladi.false.Mana usulni ko'rsatadigan oddiy misol stop() tugmani bosish orqali animatsiyani boshlashingiz va to'xtatishingiz mumkin bo'lgan haqiqiy harakatda.
<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>Bu usulning yana bir misoli, agar siz tugmani yana bossangizSlide Toggle” animatsiyani ishga tushirgandan so'ng, lekin u tugashidan oldin, animatsiya darhol saqlangan boshlang'ich nuqtadan teskari yo'nalishda boshlanadi.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Animatsiyalangan hover effektini yaratishda siz tez-tez duch keladigan muammolardan biri sichqoncha kursorini tezda joylashtirganda va olib tashlashda navbatda turgan bir nechta animatsiyadir. Nega bu vaziyatda mouseenter gli mouseleave animatsiya tugashidan oldin hodisalar tezda o'chiriladi. Ushbu muammoning oldini olish va chiroyli va silliq hover effektini yaratish uchun siz qo'shishingiz mumkin stop(true, true)usul zanjiriga, shunga o'xshash:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>JavaScript iboralari satr satr bajariladi. Biroq, jQuery effektining tugashi biroz vaqt talab qilganligi sababli, keyingi qatorning kodi avvalgi effekt ishlayotgan vaqtda ishlashi mumkin. Buning oldini olish uchun jQuery har bir effekt usuli uchun qayta qo'ng'iroq qilish funksiyasini taqdim etadi.
Qayta qo'ng'iroq qilish funktsiyasi - bu effekt tugagandan so'ng ishlaydigan funktsiya. Qayta qo'ng'iroq qilish funksiyasi effekt usullariga argument sifatida uzatiladi va ular odatda oxirgi usul argumenti sifatida paydo bo'ladi. Masalan, jQuery effekti usulining asosiy sintaksisi slideToggle() quyidagicha belgilanishi mumkin bo'lgan qayta qo'ng'iroq funktsiyasi bilan:
$(selector).slideToggle(duration, callback);Biz bayonotlarni joylashtirgan quyidagi misolni ko'rib chiqing slideToggle()e alert()birining yonida. Agar siz ushbu kodni sinab ko'rsangiz, ogohlantirish slaydni almashtirish effekti tugashini kutmasdan o'tish tugmachasini bosgandan so'ng darhol paydo bo'ladi.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Va bu erda biz bayonot kiritgan oldingi misolning o'zgartirilgan versiyasi alert() usul uchun qayta qo'ng'iroq qilish funktsiyasi ichida slideToggle(). Agar siz ushbu kodni sinab ko'rsangiz, slaydni almashtirish effekti tugagandan so'ng ogohlantirish xabari paydo bo'ladi.
<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>Xuddi shunday, mumkin defikabi boshqa jQuery effekt usullari uchun qayta qo'ng'iroq qilish funksiyalarini tugating show(), hide(), fadeIn(), fadeOut(), animate(), va boshqalar.
<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>Yuqoridagi namuna kodini sinab ko'rsangiz, har bir element uchun ikki marta bir xil ogohlantirish xabarini olasiz <h1> e <p>, faollashtirish tugmasini bosgandan so'ng.
BlogInnovazione.it
Rang berish orqali nozik vosita ko'nikmalarini rivojlantirish bolalarni yozish kabi murakkabroq ko'nikmalarga tayyorlaydi. Rang berish uchun…
Harbiy dengiz sektori 150 milliardlik bozorga yo'l olgan haqiqiy global iqtisodiy kuchdir...
O'tgan dushanba kuni Financial Times OpenAI bilan shartnoma imzolaganini e'lon qildi. FT o'zining jahon darajasidagi jurnalistikasini litsenziyalaydi...
Millionlab odamlar oylik abonent to'lovlarini to'lab, oqim xizmatlari uchun to'laydilar. Umumiy fikr, siz ...