jQuery এফেক্ট - অ্যানিমেশন

jQuery animate() মথুরা, কাস্টম এনিমেশন তৈরি করতে আপনাকে দেয়

প্রভাব প্রদর্শন



jQuery

jQuery এনিমেশন - animate() মথুরা

jQuery animate() মথুরা কাস্টম এনিমেশন তৈরি করতে ব্যবহৃত হয়。

গ্রামার:

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

প্রয়োজনীয় params প্যারামিটার, এনিমেশন তৈরির CSS এট্রিবিউটকে নির্ধারণ করে

অপ্রয়োজনীয় speed প্যারামিটার, প্রভাবের কালখণ্ডকে নির্ধারণ করে। এটি নিম্নলিখিত মান নিতে পারে: "slow"、"fast" বা মিলিসেকেন্ড

অপ্রয়োজনীয় callback প্যারামিটার, এট্রিবিউটকে অপারেশন করার সময় কার্যকরী ফাংশনের নাম

নিচের উদাহরণটি, animate() মথুরা সহজ ব্যবহারকে দেখায়; এটি <div> এলিমেন্টকে বাঁদিকে সরতে পারে, left এট্রিবিউটকে 250 পিক্সেল পর্যন্ত সরাতে পারে:

উদাহরণ

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

স্বয়ং প্রয়োগ করুন

সুঝানা:ডিফল্টভাবে, সকল HTML এলিমেন্টকে একটি স্থির অবস্থান থাকে এবং এগুলোকে সরব করা যায় না。

অবস্থান কর্মকারিতা করতে হলে, এলিমেন্টের CSS position এট্রিবিউটকে প্রথমে relative, fixed বা absolute হিসাবে সেট করতে হবে!

jQuery animate() - একাধিক এট্রিবিউট অপারেশন

পরিমাণ তৈরির সময়, একাধিক এট্রিবিউটকে একসঙ্গে ব্যবহার করা সম্ভব:

উদাহরণ

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

স্বয়ং প্রয়োগ করুন

সুঝানা:animate() মথুরা সকল CSS এট্রিবিউটকে কি অপারেশন করতে পারে?

হ্যাঁ, সম্ভব হতে পারে! কিন্তু, একটি গুরুত্বপূর্ণ কিছু মনে রাখতে হবে: animate() ব্যবহার করার সময়, সকল এট্রিবিউট নামকে Camel মার্কিং ব্যবহার করতে হবে, যেমন, padding-left-এর বদলে paddingLeft, margin-right-এর বদলে marginRight, ইত্যাদি。

同时，色彩动画并不包含在核心 jQuery 库中。

একইসঙ্গে, রঙের এনাইমেশন কোর জিনারেল jQuery লাইব্রেরির অন্তর্ভুক্ত নেই।

jQuery animate() - আপেক্ষিক মান ব্যবহার করুন

আপনি যদি আবশ্যকতা হয় তবে রঙের এনাইমেশন তৈরি করতে হবে তাহলে আপনি jQuery.com থেকে Color Animations প্লাগ-ইন ডাউনলোড করুন

উদাহরণ

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

স্বয়ং প্রয়োগ করুন

jQuery animate() - প্রতিষ্ঠিত মান ব্যবহার করুন

আপনি যেমনই এসকোপটির এনাইমেশন মান বায়ায়া করতে পারেন "show"、"hide" বা "toggle":

উদাহরণ

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

স্বয়ং প্রয়োগ করুন

jQuery animate() - কোয়ুই ফাংশন ব্যবহার করুন

ডিফল্টভাবে, jQuery এনাইমেশন প্রতিরক্ষা কোয়ুই ফাংশন প্রদান করে。

এই অর্থে, আপনি যদি একের পরে একটি এনাইমেট() কল লিখেন, jQuery একটি এই পদ্ধতির কলগুলি ধারণকারী "অভ্যন্তরীণ" কোয়ুই তৈরি করবে। এবং এক-একটি এনাইমেট() কল একের পরে একটি চালাবে。

উদাহরণ 1

আপনি যদি ভিন্ন ভিন্ন এনিমেশনকে একের পরে একটি করে চান তবে আমরা কোয়ুই ফাংশন ব্যবহার করতে হবে:

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

স্বয়ং প্রয়োগ করুন

উদাহরণ 2

নিচের উদাহরণ একটি <div> ইলেক্ট্রনিক মোটিফ অনুসারে ডানদিকে সরিয়ে তার লেখার আকার বাড়ায়:

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

স্বয়ং প্রয়োগ করুন