Animate



animate() মেথড ব্যবহার করে বিভিন্ন অ্যানিমেশন তৈরী করা যায়।


animate() মেথড

animate() মেথড ব্যবহার করে অ্যানিমেশন তৈরী করা যায়। নিচে এর সিনট্যাক্স দেখুন -

সিনট্যাক্স

$(selector).animate({params},speed,callback);

সিনট্যাক্স এর মধ্যে params প্যারামিটারটি যে এলিমেন্টের অ্যানিমেশন তৈরী করতে হবে তার সিএসএস প্রপার্টি এর মধ্যে নির্দিষ্ট করে দেয়া হয়। অপশনাল স্পীড প্যারামিটারটি ব্যবহার করা হয় ইফেক্ট এর সময়কাল (duration) সেট করার জন্য । এর মান "slow", "fast" বা মিলিসেকেন্ড হতে পারে। অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিচের উদাহরণে animate() মেথডের একটি সাধারণ ব্যবহার দেখানো হল। এটি একটি div এলিমেন্টকে ডান দিকে সরিয়ে দেয় যতক্ষণ না এর বা পাশে 300px হয়।

উদাহরণ

$("button").click(function(){
$("div").animate({left: '300px'});
});

নোট - default ভাবে সকল html এলিমেন্ট static অবস্থানে থাকে এবং একে সরানো যায় না। তাই html এলিমেন্টের অবস্থান পরিবরতন করতে হলে প্রথমে এলিমেন্টের সিএসএস position প্রপার্টির মান relative, fixed, অথবা absolute নিরধারণ করতে হবে।


animate() - একাধিক প্রপার্টি পরিবর্তন

একই সময়ে এলিমেন্টের একাধিক সিএসএস প্রপার্টি অ্যানিমেট করা যায়। নিচে উদাহরণ দেখুন -

উদাহরণ

$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});

animate() মেথড ব্যবহার করে প্রায় সকল সিএসএস প্রপার্টিই অ্যানিমেট করা যায়। কিন্তু একটি গুরুত্বপূর্ণ বিসয় হল সকল সিএসএস প্রপার্টি camel কেজ হতে হবে, যেমন padding-left এর স্থনে paddingLeft, margin-right এর স্থনে marginRight লিখতে হবে।

তবে রঙ বা color অ্যানিমেসন টি মুল jQuery library তে সংযুক্ত নেই। যদি color অ্যানিমেট করতে হয় তবে jQuery.com থেকে Color Animations plugin টি ডাউনলোড করে ব্যবহার করতে হবে।


animate() - রিলেটিভ মান

রিলেটিভ মান ব্যবহার করে কোন অ্যানিমেসন প্রপার্টি নির্ধারণ করা যায়। তখন এলিমেন্টের চলতি মানের সাথে মান গুলো রিলেটিভ হবে। এর জন্য শুধু মানগুলোর সামনে " += " বা " -= " চিহ্ন যোগ করতে হবে।

উদাহরণ

$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});



animate() - পূর্ব নির্ধারিত মান

কোন প্রপার্টির অ্যানিমেসন এর জন্য পূর্ব নির্ধারিত মান যেমন "show", "hide", অথবা "toggle" ব্যবহার করা যায়। নিচে এর উদাহরণ দেখুন -

উদাহরণ

$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});



Queue ফাংসন

যদি একটির পর একটি করে একাধিক অ্যানিমেশন লেখা হয় তবে যেক্যুয়েরী এই মেথডগুলো নিয়ে একটি আভতরিন queue তৈরি করে নেয়, যা একটির পর একটি ran করে। তাই যদি একের পর এক বিভিন্ন অ্যানিমেশন সম্পাদন করতে হয়, তখন Queue ফাংসন এর সুবিধা গ্রহন করা যায়।

নিচে এর উদাহরণ দেখুন -

উদাহরণ

$("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");
});

নিচের উদাহরণটি প্ৰথমে <div> এলিমেন্ট কে ডান দিকে মুভ করে এবং তারপর ফন্ট সাইজ বর করে।

উদাহরণ

$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.