آموزش دستور animate در جی کوئری

در این بخش از آموزش جی کوئری ، دستور animate را بررسی می کنیم.

دستور animate در جی کوئری :

با تغییر در css می توانیم انیمیشن ایجاد نماییم. دستور animate با تغییر مقادیر css حالت های زیبایی (انیمیشن) را ایجاد می کند که برای کاربر جذاب می باشد.

در مثال زیر با تغییر دادن مقدار left انیمیشن ایجاد می کنیم. با کلیک روی دکمه مقدار left را تغییر می دهیم و div به طرف راست حرکت می کند و انیمیشن ایجاد می شود.

$(document).ready(function(){ $("button").click(function(){ $("div").animate({left: '250px'}); }); });

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

در مثال پایین می بینید که می توانید همزمان روی چندین ویژگی (css) تاثیر بگذارید تا انیمیشن (animate) زیبایی را طراحی نمایید.

$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); });

در مثال زیر با استفاده از += می توانید مقداری را به مقدار قبلی عنصر اضافه نمایید و انیمیشنی را درست نمایید.

$(document).ready(function(){ $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); });

با toggle می توانیم مقدار عنصر را به مقدار قبلی بازگردانیم.

در مثال زیر ، عنصر محو شده و دوباره با کلیک روی آن نمایان می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/
libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<p>Click the button multiple times to toggle the animation.</p>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

نویسنده : هدایت عباسی

ثبت نظر