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

افکت ها در jQuery - افکت ( ) animate

افکت ( ) animate در jQuery :

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

شکل کلی استفاده از این افکت بصورت زیر است :

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

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

syntax توضیح
توضیح Parameter
این پارامتر تعیین کننده id عنصری است که می خواهیم ، متد ( ) animate را روی آن اجرا نماییم . selector
این پارارمتر یک یا چند خاصیت 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
 styles
این پارامتر تعیین کننده سرعت اتمام انیمیشن و تغییر خاصیت عنصر از حالت اول به دوم است .
استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
  1. MiliSecond : مدت زمان اجرای انیمیشن بر حسب میلی ثانیه .
  2. Slow : سرعت آهسته .
  3.  Fast : سرعت زیاد .
 speed
این پارامتر تعیین کننده سرعت انجام انیمیشن در ابتدا و انتهای فرایند متد ( ) animateاست .
استفاده از این پارامتر اختیاری است .
انواع مقادیر ممکن عبارتند از :
  1. Swing : سرعت انجام انیمیشن در ابتدا و انتهای فرایند آهسته ولی در وسط آن زیاد است .
  2. Liner :  سرعت در کل طول فرایند یکسان است .
 easing

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

Example
< 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> 		کد
خروجی

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

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

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

نام :               
آدرس Email :  

نظر شما :  

سوال امنیتی : جمع سه + پنج چنده ؟