افکت ( ) fadeIn در jQuery :

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

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

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

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

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

مثال 1 : در مثال اول یک تگ < div > د اریم که در ابتدا از دید کاربر مخفی است . یک دکمه فرمان طراحی کرده ایم که کاربر برای مشاهده تگ < div > مخفی باید بر روی آن کلیک نماید . با کلیک بر روی دکمه فرمان مثال تگ < div > نمایان می شود :

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_1 ") . click ( function( ){
          $ ( " # div_1 " ) . fadeIn( )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_1" value="click me for fadeIn!" />
    <div id= "div_1" style = "font-size: medium ; border: solid 1px black " >
       در این سایت آموزش زبان های زیر را داریم
      <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>Java Script </li>
        <li>jQuery </li>
      </ul>
     < /div >
</body>
</html>		 کد

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

مثال حالت 1 : مقدار 2000 میلی ثانیه برای انجام افکت
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_2 ") . click ( function( ){
          $ ( " # div_2 " ) . fadeIn( 2000 )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_2" value="click me for fadeIn!" />
    <div id= "div_2" style = "font-size: medium ; border: solid 1px black " >
       در این سایت آموزش زبان های زیر را داریم
      <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>Java Script </li>
        <li>jQuery </li>
      </ul>
     < /div >
</body>
</html>		 کد
مثال حالت 2 : مقدار slow برای انجام افکت
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_3 ") . click ( function( ){
          $ ( " # div_3 " ) . fadeIn( "slow" )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_3" value="click me for fadeIn!" />
    <div id= "div_3" style = "font-size: medium ; border: solid 1px black " >
       در این سایت آموزش زبان های زیر را داریم
      <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>Java Script </li>
        <li>jQuery </li>
      </ul>
     < /div >
</body>
</html>		 کد

 

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