اثرات jQuery
jQuery می‌تواند اثرات مخفی، نمایش، تغییر، حرکت و انیمیشن‌های سفارشی ایجاد کند.
با دست خود امتحان کنید
لطفاً این اثر jQuery را امتحان کنید:
CodeW3C.com - وب‌سایت پیشرو در آموزش‌های فناوری وب
در CodeW3C.com، می‌توانید تمام آموزش‌های مورد نیاز برای ساخت وب‌سایت خود را پیدا کنید.
لطفاً اینجا کلیک کنید
مثال
- jQuery hide()
- توابع hide() ساده jQuery را نمایش می‌دهد.
- jQuery hide()
- یک نمایش دیگر از hide(). چگونه بخشی از متن را مخفی کنید.
- jQuery slideToggle()
- توابع پنل اسلاید ساده jQuery را نمایش می‌دهد.
- jQuery fadeTo()
- توابع fadeTo() ساده jQuery را نمایش می‌دهد.
- jQuery animate()
- توابع animate() ساده jQuery را نمایش می‌دهد.
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 تغییر
توابع toggle() jQuery از توابع 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 دارای این fade فونکشن‌ها است:
$(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 را به relative یا absolute تنظیم کنید.
jQuery اثر - از این صفحه
| توابع | توضیحات |
|---|---|
| $(selector).hide() | پنهان کردن عناصر انتخاب شده |
| $(selector).show() | نمایش عناصر انتخاب شده |
| $(selector).toggle() | تغییر (در حالت پنهان و نمایش) عناصر انتخاب شده |
| $(selector).slideDown() | حرکت به پایین (نمایش) عناصر انتخاب شده |
| $(selector).slideUp() | حرکت به بالا (پنهان کردن) عناصر انتخاب شده |
| $(selector).slideToggle() | تغییر عناصر انتخاب شده بین حرکت به بالا و پایین |
| $(selector).fadeIn() | نورافشانی عناصر انتخاب شده |
| $(selector).fadeOut() | تاریکی عناصر انتخاب شده |
| $(selector).fadeTo() | تاریکی عناصر انتخاب شده به ناپایداری داده شده |
| $(selector).animate() | اجرای انیمیشن‌های سفارشی برای عناصر انتخاب شده |
برای دسترسی به دستورالعمل‌های کامل، لطفاً به دستورالعمل‌های jQuery Effect。
