تبلیغات
یادداشت های من - JQuery – جلسه پنجم: افکت ها Effects

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

JQuery – جلسه پنجم: افکت ها Effects

پنجشنبه 5 خرداد 1390   02:41 ب.ظ

مخفی کردن، نمایش دادن، جابجا کردن حالت، اسلاید، محو شدن، حرکت کردن.... به قول انگلیسی ها WOW!


مثال ها:

jQuery hide()

نشان دهنده متد hide() ساده در جی کوئری

jQuery hide()

نمونه ی دیگری از hide()، چگونگی مخفی کردن بخش از متن

jQuery slideToggle()

نمونه ای از یک پنل slide ساده

jQuery fadeTo()

مثال ساده ای از متد fadeTo()

jQuery.animate()

این هم مثال ساده ای از متد animate()

 

Hide و Show در جی کوئری

در jQuery شما می توانید عناصر HTML را با متدهای hide() و show() مخفی و یا آشکار کنید.

مثال
$("#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” و یا مقداری به میلی ثانیه.

مثال
$("button").click(function(){
  $("p").hide(1000);
});

پارامتر callback نام تابعی است که بعد از اینکه عمل مخفی (و یا آشکار شدن) کامل شد اجرا می شود. در مورد callback در جلسات بعدی توضیحات بیشتری خواهم داد.

Toggle در جی کوئری

متد toggle() در جی کوئری حالت نمایش عناصر HTML را به مخفی و آشکار تغییر می دهد. عناصر مخفی نشان داده شده و عناصر آشکار مخفی می شوند.

دستور

$(selector).toggle(speed,callback)

پارامتر speed همان مقادیری که قبلاً گفتم می گیرند. slow, fast, normal یا مقداری به میلی ثانیه

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

پارامتر callback هم همان کاری که گفتم انجام می دهد.

slideDown،  slideUpو  slideToggle(Slide در جی کوئری)

متد slide در حقیقت ارتفاع عناصر انتخاب شده است. جی کوئری متدهای اسلاید زیر را دارد:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

پارامتر speed و callback هم همان کارکرد همیشگی را دارند.

مثال slideDown()
$(".flip").click(function(){
  $(".panel").slideDown();
});
مثال sildeUp()
$(".flip").click(function(){
  $(".panel").slideUp()
})
مثال sildeToggle()
$(".flip").click(function(){
  $(".panel").slideToggle();
});
 

fadeIn ،  fadeout و  fadeTo (Fade در جی کوئری)

متد fade در جی کوئری در حقیقت مقدار شفافیت عناصر انتخاب شده را تغییر می دهد.

جی کوئری 3 متد fade زیر را ارائه می دهد:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

علاوه بر پارامترهای speed و callback ما در متد fadeTo() یک پارامتر opacity هم داریم که مقدار شفافیت نهایی مورد نظر را می توان مشخص نمود که 0 نشان دهنده محو شدن کامل و 1 نشان دهنده آشکار شدن کامل است.

مثال fadeTo()
$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});
مثال fadeout()
$("button").click(function(){
  $("div").fadeOut(4000);
});
 

انیمیشن (متحرک سازی) های دلخواه در jQuery

دستور مناسب برای ایجاد متحرک سازی دلخواه در جی کوئری به صورت زیر است:

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

پارامتر کلیدی در این دستور params است که خواص CSS که شیء به آن سمت حرکت می کند مشخص می کند. تمام این حرکات و تغییرات به طور هم زمان رخ می دهد:

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

پارامتر دوم duration است که سرعت حرکت را نشان می دهد و مقادیر مجاز برای این پارامتر همانند مقادیر مجاز برای پارامتر speed است. (یعنی fast، slow، normal و یا مقداری بر اساس میلی ثانیه)

مثال 1
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script> 
مثال 2
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script> 

نکته: عناصر HTML بر اساس پیشفرض در یک جای ثابت قرار دارند. برای اینکه بتوان یک شیء را حرکت داد باید خصوصیت position برای CSS آن شیء را به صورت fixed، relative و یا absolute تعریف نمایید.

 

همانطور که در جلسات قبل گفتم انشالله پس از اتمام جلسات مرجع کاملی از کدهای جی کوئری و دیگر زبان هایی که در این وبلاگ به آموزش آن ها می پردازیم تحت یک پیوست ارائه خواهم داد.


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : JQuery ،طراحی وب ،