تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


لیست افکت ها ( effects ) در jQuery :
افکت ها در jQuery یکی از مهمترین و پرکاربردترین قابلیت ها در این زبان هستند که به طراحان وب امکانات گسترده و جذابی را می دهند . افکت ها jQuery شامل تعدادی متد از پیش تعریف شده هستند که برای مثال به شما امکان می دهند عناصر مورد نظر خود را مخفی و نمایان کرده و یا نحوه نمایش آن را تغییر دهید .
استفاده از افکت ها در jQuery بسیار ساده و شبیه رویداد ها در این زبان هستند . بهتر است قبل از مطالعه این بخش ، بخش آموزش رویدادها در jQuery را مطالعه نمایید .
در لیست زیر به معرفی مهمترین افکت ها در jQuery پرداخته ایم . برای دریافت اطلاعات درباره هر افکت بر روی نام آن کلیک نمایید :

( ) fadeIn -این افکت باعث می شود عنصر مورد اثر خود را به آرامی از حالت نمایان به حالت مخفی در بیاورد .
( ) fadeOut - این افکت باعث می شود عنصر مورد اثر خود را به آرامی از حالت مخفی به حالت نمایان در بیاورد .
( ) fadeTo - این افکت میزان وضوح نمایش عنصر مورد اثر خود را به یک میزان دلخواه تغییر می دهد .
( ) hide - این افکت عنصر مورد اثر خود را مخفی می کند .
( ) show -این افکت عنصر مورد اثر خود را نمایان می کند .
( ) slideDown -این افکت با افزایش تدریجی ارتفاع ، عنصر مورد اثر خود را نمایان می کند .
( ) slideUp -این افکت با کاهش تدریجی ارتفاع ، عنصر مورد اثر خود را مخفی می کند .

 افکت ( ) animate در jQuery :
این متد بوسیله تغییر یک یا چند خاصیت CSS عنصر مورد نظر از یک حالت اولیه به مقداری جدید یک عمل انیمیشن را انجام می دهد . مقدار خاصیت یا خاصیت های CSS تعیین شده برای تغییر در عنصر مورد نظر توسط یک افکت  ( ) animate بصورت آهسته از مقدار اولیه به مقدار ثانویه تغییر می کنند که باعث ایجاد یک حالت انیمیشن می شود .
فرض کنید یک عنصر div به رنگ پس زمینه سبز دارید . مقدار خاصیت height ( ارتفاع ) آن در حالت اولیه px 100 است . می خواهید بوسیله خاصیت ( ) animate مقدار ارتفاع آن را به px 300 افزایش دهید . در هنگام اجرای ( ) animate ارتفاع عنصر به صورت آهسته از 100 به 300 افزایش می یابد و باعث ایجاد یک افکت تصویری می شود .
نکته مهم : افکت ( ) animate فقط با خواص CSS ای که مقادیر آنها عددی است مثل (Height : 30 px )  کار می کند و نمی تواند آن را با خواصی که مقدار رشته ای دارند مثل ( background-color:red ) به کار ببرید .
شکل کلی استفاده از این افکت بصورت زیر است :

 ( selector ).animate ( {styles} , speed , easing , callback ) ; 

توضیح هر یک از موارد syntax :
selector:این پارامتر تعیین کننده id عنصری است که می خواهیم ، متد ( ) animate را روی آن اجرا نماییم .
( ) function:این پارارمتر یک یا چند خاصیت CSS عنصر مورد نظر را برای تغییر و ایجاد انیمیشن تعیین می کند .
استفاده از این پارامتر اجباری است .
نکته : نکته مهم : در هنگام به کار بردن خواص CSS با متد ( ) animate بایستی کاراکترهایی مثل -  را از نام خواص حذف کنید . برای مثال خاصیت Padding-Left را بصورت PaddingLeft بکار ببرید .
انواع خواص قابل استفاده در این پارامتر عبارتند از :
* backgroundPositionX
* backgroundPositionY
* borderWidth
* borderBottomWidth
* borderLeftWidth
* borderRightWidth
* borderTopWidth
* borderSpacing
* margin
* marginBottom
* marginLeft
* marginRight
* marginTop
* outlineWidth
* padding
* paddingBottom
* paddingLeft
* paddingRight
* paddingTop
* height
* width
* maxHeight
* maxWidth
* minHeight
* minWidth
* fontSize
* bottom
* left
* right
* top
* letterSpacing
* wordSpacing
* lineHeight
*textIndent

speed: این پارامتر تعیین کننده سرعت اتمام انیمیشن و تغییر خاصیت عنصر از حالت اول به دوم است .
استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :

  1. MiliSecond : مدت زمان اجرای انیمیشن بر حسب میلی ثانیه .
  2. Slow : سرعت آهسته .
  3.  Fast : سرعت زیاد .

easing: این پارامتر تعیین کننده سرعت انجام انیمیشن در ابتدا و انتهای فرایند متد ( ) animateاست .
استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :

  1. Swing : سرعت انجام انیمیشن در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
  2. Liner :  سرعت در کل طول فرایند یکسان است .

مثال : در مثال زیر ، یک تگ div داریم ، که با کلیک بر روی دکمه فرمان ، ارتفاع آن از px 100 به px 300 افزایش می یابد ، که باعث ایجاد یک انمیشین تصویری می شود :

< html >
  < head >
    < script type="text/javascript" src="jquery.js" > < /script >
    < script type="text/javascript" >
      $ (document). ready ( function( ) {
             $("#btn1").click(function () {
                  $("#box").animate({ height: "300px" });
           });
             $("#btn2").click(function () {
                  $("#box").animate({ height: "100px" });
           });
        });
    </script>
  </head>
<body>
     <button id="btn1" > افزایش ارتفاع </button>
     <button id="btn1" > کاهش ارتفاع </button>
     <div id="Div1" style="background: #98bf21; height: 100px; width: 100px; margin: 6px;">   </div> >
</body>
</html> 

 افکت ( ) delay در jQuery :
این افکت باعث ایجاد یک تاخیر در اجرای افکت دیگری می شود .
برای مثال فرض کنید که یک افکت ( ) fadeIn  را برای یک عنصر تعیین کرده اید . این افکت در هنگام کلیک کاربر بر روی دکمه فرمان اجرا می شود . اما می خواهید کاری کنید تا مثلا 3 ثانیه بعد از کلیک کاربر بر روی دکمه فرمان ، افکت ( ) fadeIn اجرا شود . برای این منظور بایستی از افکت ( ) delay به همراه آن استفاده کنید .
شکل کلی استفاده ازاین افکت بصورت زیر است :

 $( selector ).delay( speed ) ; 

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

 توضیح syntax
selector- این پارامتر تعیین کننده id عنصری است که می خواهیم در اجرای یک افکت بر روی آن ، تاخیر ایجاد نماییم .
speed -این پاراتر تعیین کننده مدت زمان تاخیر در اجرای افکت است .
انواع مقادیر ممکن عبارتند از :

  1. MiliSecond : مدت زمان تاخیر در اجرای افکت بر حسب میلی ثانیه .
  2. Slow : سرعت آهسته .
  3.  Fast : سرعت زیاد .

مثال : در مثال زیر چندین تگ div داریم ، که در هنگام کلیک بر روی دکمه فرمان مثال ، بر روی صفحه ظاهر می شوند . اما برای اجرای هر کدام یک تاخیر با استفاده از متد ( ) delay ایجاد کرده ایم :

< html >
   < head >
     < script type="text/javascript" src="jquery.js" > < /script >
     < script type="text/javascript" >
       $ (document). ready ( function( ) {
           $("button").click(function () {
          $("#div1").delay("slow").fadeIn();
          $("#div2").delay("fast").fadeIn();
          $("#div3").delay( ( ) delay 00).fadeIn();
          $("#div4").delay(2000).fadeIn();
          $("#div5").delay(4000).fadeIn();
           });
         }); 
     </script> 
   </head>
 <body>
        <button type="button"> برای مشاهده باکس ها با تاخیر کلیک نمایید</button>
        <br>
        <div id="div1" style="width: 90px; height: 90px; display: none; background-color: black;"> </div>
        <br>
        <div id="div2" style="width: 90px; height: 90px; display: none; background-color: green;"> </div>
        <br>
        <div id="div3" style="width: 90px; height: 90px; display: none; background-color: blue;"> </div>
        <br>
        <div id="div4" style="width: 90px; height: 90px; display: none; background-color: red;"> </div>
        <br>
        <div id="div5" style="width: 90px; height: 90px; display: none; background-color: purple;"> </div>  
 </body>
 </html> 

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

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

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

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

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

 < 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> 

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

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

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

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

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

< 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> 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, بازی, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین