মূল বিষয়বস্তু
কম্পিউটার প্রোগ্রামিং
কোর্স: কম্পিউটার প্রোগ্রামিং > অধ্যায় 7
পাঠ 7: জেকুয়েরিতে DOM অ্যানিমেশন এবং এর প্রতিক্রিয়াপর্যালোচনা: জেকুয়েরিতে DOM অ্যানিমেশন
বিভিন্ন ধরনের অ্যানিমেশন এবং ইফেক্টের জন্য জেকুয়েরির কয়েকটি ফাংশন রয়েছে, যা এই নথিপত্রে তালিকাভুক্ত।
দৃশ্যতা পরিবর্তন
তুমি যে কোন সময় এটির মধ্যে দিতে পার এবং জেকুয়েরি এটি ব্যবহার করে দৃশ্যতা অ্যানিমেশন করবে:
$("#pic").toggle(1000);এছাড়াও স্লাইড ইফেক্টের জন্য
slideDown(), slideUp() এবং slideToggle() ব্যবহার করা যায় (উদাহরণ) অথবা ফেডিং ইফেক্টের জন্য fadeIn(), fadeOut() এবং fadeToggle() ব্যবহার করা যায়
(উদাহরণ)।তুমি এই ফাংশনগুলোর যে কোনটিতে দ্বিতীয় প্যারামিটার হিসেবে একটি কলব্যাক ফাংশন পাঠাতে পার এবং জেকুয়েরি অ্যানিমেশন শেষে সেই কলব্যাক ফাংশনটিকে কল করবে:
$("#pic").toggle(1000, function() {
$("body").append("It's here!");
});তুমি একাধিক ইফেক্টকে একসাথে করে তাদের মাঝে
delay() কল করতে পার:$("#pic").slideUp(300).delay().fadeIn();পছন্দ অনুযায়ী অ্যানিমেশন
একটি নির্দিষ্ট সিএসএস বৈশিষ্ট্যে অ্যানিমেশন করতে চাইলে, সেক্ষেত্রে
animate() ব্যবহার করা যায়: $("#pic").animate({
width: "70%",
opacity: 0.7,
padding: 20
}, 1000);লক্ষ্য করি, যে সকল সিএসএস বৈশিষ্ট্য সাংখ্যিক মান নেয় শুধু তাদের অ্যানিমেশন করা যায় - তাই এটি ব্যবহার করা 'color' বৈশিষ্ট্য অ্যানিমেশন করা যায় না। (উদাহরণ)
আরেকটি বিষয় হল
animate() ফাংশনে বিভিন্ন কলব্যাক ফাংশন যোগ করা যায়, কলব্যাক ফাংশন ব্যবহার করে জানা যায় যে কতদূর অ্যানিমেশন সম্পন্ন হয়েছে নাকি শেষ হয়ে গেছে। বিস্তারিত জানার জন্য এই নথিপত্র দেখা উচিত।দায়িত্বের সাথে অ্যানিমেশন করা
অ্যানিমেশন দিয়ে যেন ব্যবহারকারীর ব্যবহার সহজ হয়, কঠিন নয়। অ্যানিমেশন দিয়ে যেন তোমার ওয়েব অ্যাপের কোন বিষয় সম্পর্কে সহজে বোঝা যায় অথবা যেন এটি কিছুটা মজা যোগ করে - কোন অবস্থাতেই যেন এর কারণে ওয়েব অ্যাপ অথবা ওয়েবসাইট ধীর গতির না হয়। ডিজাইনারদের সাথে আলোচনা করে অথবা ব্যবহারকারীদের জিজ্ঞাসা করে অ্যানিমেশনের কাজটি করা উচিত।
অনেক সময় ব্যবহারকারীরা এমন ডিভাইস ব্যবহার করতে পারে যেখানে অ্যানিমেশন কার্যকরী নয়, এক্ষেত্রে
$.fx.off কে true করে অ্যানিমেশন বন্ধ করা যায়।আলোচনায় অংশ নিতে চাও?
কোন আলাপচারিতা নেই।