آموزش انیمیشن با جی کوئری

متد animate در جی کوئری برای ایجاد انیمیشن برای یک عنصر کاربرد دارد.

syntax

$(selector).animate( {params}, speed, callback);

params : پارامترهایی برای متحرک سازی خواص css در یک عنصر

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

slow,fast,millisecond

callback : یک فانکشن است که در پایان انیمیشن اجرا می شود.

مثال :

یک کاربرد ساده از متد animate ، حرکت یک عنصر <div> به سمت راست تا وقتی که خاصیت left آن به 250px برسد.

HTML

<button> Start Animation </button>

<div style"background:red;height:300ps;  width:300px; position:absolute; "> </div>

 

JQUERY

$(document).ready(function(){

$('button').click(function(){

$('div').animate({

left:'250px'

});

});

});

 

همچنین می توان به خواص css یک عنصر مقادیری را اضافه و یا از آن کم کرد.

مثال:

$(document).ready(function(){

$('button').click(function(){

$('div').animate({

left:'250px',

height:'+=150px',

width:+=150px'

},slow);

});

});

 

نکته:

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

  fixed,relative,absolute


نمایش نتیجه کد
تمام حقوق مادی و معنوی این ساین متعلق به mojtaba khodadadi میباشد
  
2016 - 2022