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

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

افکت ( ) fadeTo در jQuery :

این متد میزان شفافیت و وضوح نمایش یک عنصر را به تدریج به یک مقدار تعیین شده از سوی کاربر تغییر می دهد .
به عبارت دیگر این افکت میزان نور نمایش یک عنصر را کم یا زیاد می کند . شکل کلی استفاده از این متد به شرح زیر است :

Syntax $ ( " selector " ).fadeTo ( speed , opacity , callback )

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

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

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

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

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_1 ") . click ( function( ){
          $ ( " # div_1 " ) . fadeTo ( 2000 , 0.5 )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_1" value="click me for fadeTo half!" />
    <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> 		کد
در این سایت آموزش زبان های زیر را داریم
  • HTML
  • CSS
  • Java Script
  • jQuery
خروجی

مثال 2 : در مثال دوم یک عکس ( تگ < div > ) د اریم که در ابتدا به صورت عادی است . کاربر می تواند با کلیک بر روی دکمه فرمان مثال وضوح نمایش آن عکس را به میزان خیلی کمی کاهش دهد . برای مشاهده خروجی مثال بروی دکمه فرمان کلیک نمایید . توجه داشته باشید این افکت به علت استفاده از پارامتر "slow" به آرامی انجام می شود :

Example
< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
        $ (" # Btn_2 ") . click ( function( ){
          $ ( " # Pic_1 " ) . fadeTo ( "slow" , 0.1 )
          });
        });
    </script>
  </head>
<body>
      < input type="button" id="Btn_2" value="click me for fadeTo!" />
      < img alt="firefox" src="../Pic/firefox.gif" id="Pic_1" />
</body>
</html> 		کد

firefox 		خروجی

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

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

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

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