জেকুয়েরি animate() মেথড
সংজ্ঞা এবং ব্যবহার
animate() মেথড এক সেট সিএসএস প্রোপাটির মাধ্যমে এনিমেশন তৈরি করে।
এই মেথডটি একটি এলিমেন্টকে সিএসসএস স্টাইলের মাধ্যমে এক অবস্থা থেকে অন্য অবস্থায় রূপান্তর করে। এনিমেশন ইফেক্ট তৈরি করতে সিএসএস প্রোপার্টির ভ্যালুগুলো খুব ধীরে ধীরে পরিবর্তিত হয়।
শুধুমাত্র সংখ্যাবাচক মান এনিমেশন হতে পারে (যেমন "margin:30px")। শুধুমাত্র "show", "hide" এবং "toggle" ব্যতীত অন্য স্ট্রিং এনিমেশন করা যায় না (যেমন "background-color:red")। এই মানগুলো এনিমেশনযুক্ত এলিমেন্টকে হাইড এবং সো করে।
পরামর্শঃ রিলেটিভ এনিমেশন জন্য "+=" অথবা "-=" ব্যবহার করুন।
সিনট্যাক্সঃ
(selector).animate({styles},speed,easing,callback)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে animate() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
style |
আবশ্যক। এনিমেশন যুক্ত করার জন্য নির্দিষ্ট এক বা একাধিক সিএসএস প্রোপার্টি/ভ্যালুকে নির্দেশ করে নোট: যেই প্রোপার্টিগুলোকে
টিপসঃ কালার এনিমেশন কোর জেকুয়েরি লাইব্রেরীর অন্তর্ভুক্ত নয়। আপনি যদি কালার এনিমেশন যুক্ত করতে চান তবে jQuery.com থেকে আপনাকে কালার এনিমেশন প্লাগইন ডাউনলোড করে নিতে হবে। |
speed |
ঐচ্ছিক। এনিমেশনের স্পিড নির্দিষ্ট করে। ডিফল্ট ভ্যালু হচ্ছে 400 মিলিসেকেন্ড।সম্ভাব্য ভ্যালুগুলো হলোঃ
|
| easing | ঐচ্ছিক। বিভিন্ন পয়েন্ট থেকে কোন এলিমেন্টের এনিমেশনের স্পিড নির্দিষ্ট করে। ডিফল্ট ভ্যালু হচ্ছে "swing" সম্ভাব্য ভ্যালুগুলো হলো:
|
| callback | ঐচ্ছিক। এনিমেশন শেষ হওয়ার পর একটি ফাংশন কাজ করে। কলব্যাক ফাংশন সম্পর্ক আরো জানতে আমাদের জেকুয়েরি কলব্যাক অধ্যায়টি পড়ুন। |
animate() মেথড সংক্রান্ত উদাহরণ
এনিমেশনের মাধ্যমে একটি এলিমেন্টের উচ্চতা পরিবর্তনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#addAnimation").click(function(){
$("#animateBox").animate({height: "150px"});
});
$("#resetAnimation").click(function(){
$("#animateBox").animate({height: "70px"});
});
});
</script>
</head>
<body>
<button id="addAnimation">এনিমেশন যুক্ত করুন</button>
<button id="resetAnimation">রিসেট করুন</button>
<div id="animateBox" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
</html>
ফলাফল
কলব্যাক ফাংশনের সাথে animate() ব্যবহার
animate() মধে কিভাবে callback ফাংশন ব্যবহার করা যায় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
animationStart();
function animationStart(){
div.animate({height: 200}, "slow");
div.animate({width: 200}, "slow");
div.css("background-color", "blue");
div.animate({height: 100}, "slow");
div.animate({width: 100}, "slow", animationStart);
}
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<div style="width:50px;height:50px;position:absolute;left:10px;top:50px;background-color:red;"></div>
</body>
</html>
ফলাফল
বিকল্প গঠনের উদাহরণ
বিকল্প গঠনের মাধ্যম বিভিন্নরকম এনিমেশন স্টাইল এবং অপশন দেওয়া যায়। নিচে বিকল্প গঠন ব্যবহার করে animate() মেথডের উদাহরণ দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#animateBox").animate({
height: "200px",
width: "200px"
}, {
duration: 4000,
easing: "linear",
complete: function(){
$(this).after("<p>এনিমেশন সম্পন্ন হয়েছে!</p>");
}
});
});
});
</script>
</head>
<body>
<button id="animateBtn">উচ্চতা এবং প্রস্থ একত্রে এনিমেশন করুন</button>
<div id="animateBox" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
</html>
ফলাফল
প্রোগ্রেস বার তৈরিতে animate() মেথডের ব্যবহার
কিভাবে একটি প্রোগ্রেস বার তৈরিতে animate() ব্যবহার করা যায় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#progressBox").animate({
width: "400px"
}, {
duration: 5000,
easing: "linear",
step: function(x) {
$("#percentage").text(Math.round(x * 100 / 400) + "%");
}
});
});
});
</script>
</head>
<body>
<button id="animateBtn">প্রোগ্রেস বারটি চালু করুন</button>
<div style="border:1px solid green;margin:10px;width:400px;">
<div id="progressBox" style="background:#98bf21;height:35px;width:1px;border:1px solid green;"></div>
</div>
<p id="percentage"></p>
</body>
</html>
ফলাফল
স্মুথ স্ক্রলের ব্যবহার
কিভাবে animate() ব্যবহার করে লিংকে স্মুথ স্ক্রল যুক্ত করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1200, function(){
window.location.hash = hash;
});
}
});
});
</script>
<style>
body, html, .blankSection {
height: 400px;
}
section {
min-height: 400px;
}
</style>
</head>
<body>
<a href="#section2">নিচের ২ নাম্বার সেকশনে স্মুথভাবে স্ক্রলিং করার জন্য এখানে ক্লিক করুন</a>
<div class="blankSection">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>
</body>
</html>
ফলাফল