تبلیغات متنی و بنر

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

افکت ( ) slideDown در jQuery :

این افکت با افزایش تدریجی ارتفاع یک عنصر مخفی ، آن را از حالت مخفی به حالت نمایان در می آورد . در واقع این افکت این کار را در قالب یک افکت تصویری انجام می دهد . بدیهی است این افکت بر روی عنصری موثر است که در ابتدا مخفی باشد .
این افکت بر روی عناصری که با یکی از افکت های hide یا fadeOut در jQuery مخفی شده اند و یا خاصیت display آنها در css برابر با none باشد ، اثر خواهد داشت .
شکل کلی استفاده از این متد به شرح زیر است :

Syntax $ ( " selector " ).slideDown ( speed , callback )

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

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

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

مثال 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 " ) . slideDown( )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_1" value="click me for show image!" />
      < img id="img_1" src="../Pic/computer_banner.jpg" style="display: none" />
</body>
</html> 		کد

خروجی

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

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_2 ") . click ( function( ){
          $ ( " # img_2 " ) . slideDown( 2000 )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_2" value="click me for show image!" />
      < img id="img_2" src="../Pic/computer_banner.jpg" style="display: none" />
</body>
</html> 		کد

خروجی

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

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

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

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : جمع سه + پنج چنده ؟