শউলি
Query animate() method ব্যবহার করে কাস্টম অ্যানিমেশন তৈরী করার পদ্ধতি :
সিনট্যাক্স
$(selector).animate({params},speed,callback);
সিনট্যাক্স এর মধ্যে যে {params}, parameter আছে তাকে যার অ্যানিমেশন তৈরী করতে হবে তার CSS property এর মধ্যে define করতে হবে।
অন্য parameter (speed parameter) টি অপশনাল এবং এটি ব্যাবহার করা হয় ইফেক্ট আর সময়কাল (duration) সেট করার জন্য । "slow", "fast", অথবা মিলি সেকেন্ড এ ও ভ্যালু দেয়া যায়।
অন্য আর অপশনাল একটি parameter callback যা অ্যানিমেশন সমাপ্ত হওয়ার পরে কার্যকর করা হয়।
একটি খুব ছোট উদাহরণ নীচে দেওয়া হলো
$("button").click(function(){ $("div").animate({left: '250px'}); });
ফলাফল : animate()
jQuery animate() method একাধিক Properties
এর মাধ্যমে একাধিক Properties একই সময়ে animate করা যেতে পারে
$("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });
ফলাফল : একাধিক Properties
এখন প্রশ্ন হতে পারে animate() method দিয়া কি CSS Properties animate করা সম্ভব?
উত্তর প্রায়, হ্যাঁ!
এখন আমরা দেখব কিভাবে animate() মেথড Relative Values ব্যবহার করে |
$("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); });
ফলাফল : Relative Values
পূর্ব নির্ধারিত (Pre-defined) Values ব্যবহার করেও animate() method use করা যায়
যেমন নিচের উধাহরণ দেখুন
$("button").click(function(){ $("div").animate({ height: 'toggle' }); });
ফলাফল : Pre-defined
এবার আমার দেখব কিভাবে Queue Functionality ব্যবহার করে animate() method use করা যায়
যেমন নিচের উধাহরণ দুটি লক্ষ করুন
উধাহরণ 1 .
আপনি যদি একে অপরের পর বিভিন্ন অ্যানিমেশন সম্পাদন করতে চান , তখন Queue Functionality ar সুবিধা গ্রহণ করতে পারেন
$("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); });
ফলাফল : Queue Functionality
উধাহরণ 2
এটা প্ৰথম এ <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বাড়ায়
$("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); });
ফলাফল : ফন্ট সাইজ