افکت ( ) fadeOut در jQuery :

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

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

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

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

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

مثال 1 : در مثال اول یک تگ < div > داریم که با کلیک کاربر بر روی آن افکت fadeOut اجرا شده و باعث مخفی شدن آن می شود . برای اجرای افکت بر روی متن تگ < div > کلیک نمایید .

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # div_1 ") . click ( function( ){
          $ ( " # div_1 " ) . fadeOut( )
          });
        });
    </script>
  </head>
<body>
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
      jQuery is a very inteligent way for programming . many wonderful things you can do with it !
     < /div >
</body>
</html>		 کد

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

مثال حالت 1 : مقدار 2000 میلی ثانیه برای انجام افکت
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # div_2 ") . click ( function( ){
          $ ( " # div_2 " ) . fadeOut( 2000 )
          });
        });
    </script>
  </head>
<body>
    <div id= "div_2" style = "font-size: medium ; border: solid 1px black " >
      jQuery is a very inteligent way for programming . many wonderful things you can do with it !
     < /div >
</body>
</html>		 کد
مثال حالت 2 : مقدار slow برای انجام افکت
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # div_3 ") . click ( function( ){
          $ ( " # div_3 " ) . fadeOut( "slow" )
          });
        });
    </script>
  </head>
<body>
    <div id= "div_3" style = "font-size: medium ; border: solid 1px black " >
      jQuery is a very inteligent way for programming . many wonderful things you can do with it !
     < /div >
</body>
</html>		 کد

 

تعداد امتیازدهندگان: 5154
مسیر کوتاه: rangine.ir/node/109