توابع اسلاید در جی کوئری

          حمیدرضا 
            بازدید : 2075
          چهارشنبه 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>

function showSlide()

{

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

alert("end");

} );

}

</script>

<<</code>>>

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

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

slideUp:

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

slideToggle:

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

ارسال نظر برای این مطلب

	این نظر توسط رقــــیـــه یـــون در تاریخ 1394/11/01 و 11:04 دقیقه ارسال شده است

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

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2560	snakeeye
طراحی باکس دانلود	6	2769	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	9475	grimboy
انواع قالب اختصاصی	3	2313	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2718	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9847	jack7788