آموزش jQuery - افکت slideUp

آموزشگاه برنامه نویسی تحلیل داده : دوره های آموزشی برنامه نویسی و طراحی وب ASP.Net , C# , HTML , CSS , SQL Server

آموزش اندروید مشهد | دوره طراحی مشهد | کلاس برنامه نویسی کلاس android | کلاس اندروید | آموزش asp مشهد| دوره php

افکت ها در jQuery - افکت slideUp

افکت ( ) slideUp در jQuery :

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

Syntax

$ ( " selector " ).slideUp ( speed , callback )

توضیح هر یک از موارد syntax :

syntax توضیح
توضیح	Parameter
selector عنصری است که این افکت باعث مخفی شدن آن می شود .	selector
این پارامتر در این افکت اختیاری بوده و مقدار پیش فرض آن صفر است . این پارامتر سرعت مخفی شدن عنصر توسط افکت را تعین می کند . این پارامتر به دو صورت قابل مقداردهی می باشد . تعیین به وسیله زمان بر حسب میلی ثانیه : در این حالت مدت زمانی که می خواهید در آن عنصر مخفی شود را نعیین می کنید . مثلا 100 ms . تعیین بر اساس 3 حالت کلی زیر : در این حالت با انتخاب یکی از 3 مقدار زیر سرعت مخفی شدن را آرام ، معمولی و یا سریع انتخاب می نمایید . "slow" "normal" "fast"	speed
توسط این پارامتر می توان نام یک تابع را تعیین کنید تا پس از پایان پافتن اجرای افکت و مخفی شدن عنصر مورد نظر ، آن تابع اجرا شود . به کار بردن این پارامتر اختیاری است .	callback

در چند مثال سعی می کنیم تا استفاده از افکت ( ) slideUp را در عمل به شما نمایش دهیم .

مثال 1 : در مثال اول یک تصویر ( تگ < img > ) د اریم . یک دکمه فرمان طراحی کرده ایم که کاربر می تواند با کلیک بر روی آن باعث مخفی شدن عکس شود . برای مخفی کردن عکس بر روی دکمه فرمان در خروجی مثال کلیک نمایید :

Example
< html > < head > < script type="text/javascript" src="jquery.js" > < /script > < script type="text/javascript" > $ (document). ready ( function( ) { $ (" # Btn_1 ") . click ( function( ){ $ ( " # img_1 " ) . slideUp( ) }); }); </script> </head> <body> < input type="button" id="Btn_1" value="click me to hide image!" /> < img id="img_1" src="../Pic/computer_banner.jpg" " /> </body> </html>	کد
	خروجی

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ... >>>>> ورود به انجمن تخصصی

نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :
بلهخیر

نام :
آدرس Email :

نظر شما :

سوال امنیتی : جمع سه + پنج چنده ؟