loading...

ابزارها قالب

توضیح چگونگی استفاده از توابع انیمیشنی اسلاید در جی کوئری با مثال

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 1914 چهارشنبه 30 دي 1394 نظرات (1)

من قبلا در مطلب توابع انیمیشنی جی کوئری درباره ی تابع های موجود در جی کوئری برای ایجاد انیمیشن های ساده توضیح داده بودم. اما به تازگی یکی از کاربران سوالی در مورد نوعی انیمیشن پرسید که مربوط به slide ها می شد. (یعنی slideUp , slideDown , slideToggle)

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

تابع های انیمیشن slide

slideDown:

این تابع برای نمایش شی پنهان به شیوه ی اسلاید به کار می رود. اگر شی شما توسط css در حالت پنهان قرار داده شده باشد (display: none) این تابع قابل استفاده است. انیمیشن slideDown این گونه کار می کند که شی را در حالتی با کم ترین ارتفاع نمایش می دهد و در بازه ی زمانی مشخص شده ارتفاع آن را به مقدار حقیقی شی می رساند.

موارد [] دار اختیاری هستند.

این شکل کلی تابع slideDown و بقیه ی تابع های یاد شده است:

<<<code>>>

$( Selector ).slideDown( [Duration] [, Complete] );

<<</code>>>

Selector: مربوط به متن یا شی جاوا اسکریپتی ای است که با آن می توانید شی مورد نظر خود در صفحه را انتخاب کنید و تغییر را روی آن اعمال کنید.

Duration: مدت زمانی است که اجرای این انیمیشن باید طول بکشد. (مقدار پیش فرض 400 میلی ثانیه)

Complete: تابعی است که بعد از اتمام انیمیشن اجرا می شود.

یک مثال

می خواهم وقتی روی یک لینک کلیک شد ، شی مورد نظر از صفحه که پنهان است ، به حالت اسلاید به نمایش در بیاید و بعد از پایان انیمیشن پیغامی نمایش داده شود.

<<<code>>>

<a href="#" onclick="showSlide();">click me</a>

<div style="background: #789; padding: 15px; margin: 15px; display: none;" align="center" id="toolstheme">for slide</div>

<script src="http://www.toolstheme.ir/js/jquery.js" type="text/javascript"></script>

<script>

function showSlide()

{

   $("#toolstheme").slideDown( 1000 , function(){

      alert("end");

   } );

}

</script>

<<</code>>>

مشاهده ی خروجی کد بالا

رنگ قرمز: طرز انتخاب اشیا در جی کوئری بر مبنای Css است. یعنی برای این که بدانید چگونه اشیا را انتخاب کنید باید درباره ی Selector ها در سی اس اس اطلاعات داشته باشید.

slideUp:

تمامی توضیحات این تابع و حتی آرگومان های آن مشابه slideDown است. تنها تفاتی که وجود دارد این است که این تابع شی در حال نمایش را پنهان می کند. همان مثال بالا را یک بار با slideUp بنویسید تا ببینید چطور کار می کند.

slideToggle:

تمامی توضیحات این تابع و حتی آرگومان های آن مشابه دو تابع قبل است. تنها تفاوت این است که این تابع تا حدودی کار هر دو تابع قبل را انجام می دهد. به این معنی که اگر شی در حال نمایش باشد ، این تابع شی را با انیمیشن slide پنهان می کند و اگر شی پنهان باشد ، این تابع شی را نمایش می دهد. پیشنهاد می کنم برای فهم بهتر مثال بالا را برای این تابع نیز یک بار بنویسید و نتیجه را ببینید.

 

مطالب مرتبط
ارسال نظر برای این مطلب
این نظر توسط رقــــیـــه یـــون در تاریخ 7 سال پیش و 11:04 دقیقه ارسال شده است

سلام.
ممنونم ازت.
عالیه.


نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 1
  • تعداد اعضا : 3196
  • آی پی امروز : 39
  • آی پی دیروز : 115
  • بازدید امروز : 296
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,909
  • بازدید ماه : 10,406
  • بازدید سال : 101,776
  • بازدید کلی : 1,788,211
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص