jQuery ইফেক্ট

  • পূর্ববর্তী পৃষ্ঠা
  • পরবর্তী পৃষ্ঠা

jQuery টুলকিট হিসেবে লুকানো, দেখানো, সুইচ, স্লাইডার এবং কাস্টম অ্যানিমেশন ইত্যাদি প্রভাব তৈরি করতে পারে。

স্বয়ং প্রয়াস করুন

এই jQuery ইফেক্টটি চেষ্টা করুন:

CodeW3C.com - প্রধান ওয়েব টেকনোলজি টিউটোরিয়াল সাইট

CodeW3C.com-এ আপনার প্রয়োজনীয় সব ওয়েব সাইট নির্মাণ টিউটোরিয়াল পাওয়া যায়。

এখানে ক্লিক করুন

উদাহরণ

jQuery hide()
সরল jQuery hide() ফাংশন প্রদর্শন
jQuery hide()
আরেকটি hide() প্রদর্শন। কিভাবে একটি অংশকে লুকানো যায়。
jQuery slideToggle()
সরল slide panel ইফেক্ট প্রদর্শন
jQuery fadeTo()
সরল jQuery fadeTo() ফাংশন প্রদর্শন
jQuery animate()
সরল jQuery animate() ফাংশন প্রদর্শন

jQuery লুকানো এবং দেখা যাওয়া

hide() এবং show() দুটি ফাংশনের মাধ্যমে jQuery HTML এলিমেন্টের লুকানো এবং দেখা যাওয়ার সমর্থন করে:

উদাহরণ

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

স্বয়ং প্রয়াস করুন

hide() এবং show() ফাংশনকে speed এবং callback দুটি বাছাইযোগ্য প্যারামিটার দেওয়া যায়。

সংজ্ঞা:

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

speed প্যারামিটার দেখা যাওয়া এবং লুকানোর গতি নির্ধারণ করে। এই মানগুলি সম্ভব: "slow", "fast", "normal" অথবা মিলিসেকেন্ড

callback প্যারামিটার hide এবং show ফাংশন কম্প্লিট হওয়ার পরে চালু হয়েছে এবং ফাংশনের নাম callback পারামিটারগুলির জ্ঞান

উদাহরণ

$("button").click(function(){
$("p").hide(1000);
});

স্বয়ং প্রয়াস করুন

jQuery টোগল

jQuery toggle() ফাংশন show() এবং hide() ফাংশনকে ব্যবহার করে HTML এলিমেন্টের দৃশ্যমান অবস্থা বদলায়

দেখা যাওয়া এলিমেন্টকে লুকানো এবং লুকানো এলিমেন্টকে দেখা যাওয়া করা

সংজ্ঞা:

$(selector).toggle(speed,callback)

speed পারামিটারটি এমন মান নিতে পারে: "slow", "fast", "normal" বা মিলিসেকেন্ড

উদাহরণ

$("button").click(function(){
$("p").toggle();
});

স্বয়ং প্রয়াস করুন

callback পারামিটার হল এমন ফাংশনের নাম যা ফাংশন সম্পন্ন হওয়ার পরে চালু হয়। এই টিউটোরিয়ালের নিচের অধ্যায়ে আপনি আরও বেশি জানতে পারবেন callback পারামিটারগুলির জ্ঞান

jQuery সরল স্লাইড ফাংশন - slideDown, slideUp, slideToggle

jQuery একটি সরল স্লাইড ফাংশন ধারণ করে:

$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)

speed পারামিটারটি এমন মান নিতে পারে: "slow", "fast", "normal" বা মিলিসেকেন্ড

callback পারামিটার হল এমন ফাংশনের নাম যা ফাংশন সম্পন্ন হওয়ার পরে চালু হয়। এই টিউটোরিয়ালের নিচের অধ্যায়ে আপনি আরও বেশি জানতে পারবেন callback পারামিটারগুলির জ্ঞান

slideDown() প্রয়োগ

$(".flip").click(function(){
$(".panel").slideDown();
});

স্বয়ং প্রয়াস করুন

slideUp() প্রয়োগ

$(".flip").click(function(){
$(".panel").slideUp();
})

স্বয়ং প্রয়াস করুন

slideToggle() প্রয়োগ

$(".flip").click(function(){
$(".panel").slideToggle();
});

স্বয়ং প্রয়াস করুন

jQuery Fade ফাংশন - fadeIn(), fadeOut(), fadeTo()

jQuery এমন ফাংশনগুলি প্রদান করে

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed পারামিটারটি এমন মান নিতে পারে: "slow", "fast", "normal" বা মিলিসেকেন্ড

fadeTo() ফাংশনের opacity পারামিটারটি নির্দিষ্ট অবস্থানে অনুবাদ করে

callback পারামিটার হল এমন ফাংশনের নাম যা ফাংশন সম্পন্ন হওয়ার পরে চালু হয়। এই টিউটোরিয়ালের নিচের অধ্যায়ে আপনি আরও বেশি জানতে পারবেন callback পারামিটারগুলির জ্ঞান

fadeTo() প্রয়োগ

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

স্বয়ং প্রয়াস করুন

fadeOut() প্রয়োগ

$("button").click(function(){
$("div").fadeOut(4000);
});

স্বয়ং প্রয়াস করুন

jQuery কাস্টম এনিমেশন

jQuery ফাংশন কাস্টম এনিমেশন তৈরির সিনট্যাক্স

$(selector).animate({params},[duration],[easing],[callback])

কীভাবে প্রধান পারামিটার paramsএটি এনিমেশন তৈরির CSS প্রকৃতি নির্দিষ্ট করে। একাধিক এমনই প্রকৃতি নিয়ে নিতে পারি:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

দ্বিতীয় পারামিটার durationএটি এমন সময়কে নির্দিষ্ট করে যা এনিমেশনের উপযোগে প্রয়োগ করা হয়। এটির সংজ্ঞায়িত মানগুলি হল: "slow", "fast", "normal" বা মিলিসেকেন্ড।

প্রতিমান 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

স্বয়ং প্রয়াস করুন

প্রতিমান 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

স্বয়ং প্রয়াস করুন

HTML উপাদানকে ডিফল্টভাবে স্থির স্থানান্তরণ হয় এবং সরানো হয় না。

যদি উপাদানকে সরানো করতে হয়, তবে CSS-এর position রেলেটিভ বা অ্যাবসোলিউট সংযোজন করুন。

jQuery প্রভাব - এই পৃষ্ঠা থেকে

ফাংশন বর্ণনা
$(selector).hide() নির্বাচিত উপাদানকে লুকিয়ে রাখছে
$(selector).show() নির্বাচিত উপাদানকে দেখাচ্ছে
$(selector).toggle() নির্বাচিত উপাদানকে লুকিয়ে থাকা এবং দেখানোর মধ্যে টুলবক্স
$(selector).slideDown() নির্বাচিত উপাদানকে নীচে সরিয়ে দেখাচ্ছে
$(selector).slideUp() নির্বাচিত উপাদানকে উপরে সরিয়ে লুকিয়ে রাখছে
$(selector).slideToggle() নির্বাচিত উপাদানকে উপরে এবং নীচে সরানোর মধ্যে টুলবক্স
$(selector).fadeIn() নির্বাচিত উপাদানকে লাইনে নিচ্ছে
$(selector).fadeOut() নির্বাচিত উপাদানকে হালকা করে নিচ্ছে
$(selector).fadeTo() নির্বাচিত উপাদানকে দেওয়া অবৈধতা পরিমাণে হালকা করে নিচ্ছে
$(selector).animate() নির্বাচিত উপাদানে কাস্টম অ্যানিমেশন প্রদর্শন

সমস্ত পরিচ্ছেদ দেখতে আমাদের jQuery Effect সংক্রান্ত পরিচ্ছেদ。

  • পূর্ববর্তী পৃষ্ঠা
  • পরবর্তী পৃষ্ঠা