پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
با سلام خدمت شما همراهان همیشگی وب سایت پرنیان طرح
با یکی دیگر از مقالات آموزشی برنامه نویسی JQuery در خدمتتان هستیم.
در این آموزش قصد داریم تا مبحث افکت های Animation در JQuery را برایتان آموزش بدهیم.
در ادامه همراه ما باشید.
مقدمه
با کمک متد ()Animate میتوان انیمیشن های سفارشی ایجاد کرد.
پارامتر های مورد نیاز ویژگی های CSS را برای پارامترهای انیمیشن تعریف میکند.
پارامتر سرعت اختیاری مدت زمان اثر را مشخص میکند که میتواند مقادیر زیر را بگیرد : کند ، سریع ، میلی ثانیه.
متد ()animate :
این افکت با اعمال تغییراتی بر روی یک عنصر در صفحه در بخشی از زمان حالت انیمیشنی به آن المان میدهد.
پارامتر برگشت به حالت اختیاری تابعی است که پس از اتمام انیمیشن اجرا میشود.
مثال زیر یک کاربرد ساده از روش ()animate را نشان میدهد.
این مثال عنصر div را به سمت راست حرکت میدهد تا زمانی که فاصله اش از سمت چپ به 250x برسد.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left: ‘250px’});
});
});
</script>
</head>
<body>
<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>
[/php]
خروجی این مثال را در این لینک ببینید.
در متد ()jQuery animate چندین ویژگی را دستکاری کنید:
توجه کنید که میتوانید چندین ویژگی را به طور همزمان متحرک کنید.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({
left: ‘250px’,
opacity: ‘0.5’,
height: ‘150px’,
width: ‘150px’
});
});
});
</script>
</head>
<body>
<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>
[/php]
خروجی این مثال را در این لینک ببینید.
در متد ()jQuery animate میتوانید از مقادیر نسبی استفاده کنید:
همچنین میتوان مقادیر نسبی را برای انیمیشن ها تعریف کرد این کار با قرار دادن += یا -= جلوی مقادیر انجام میشود.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({
left: ‘250px’,
height: ‘+=150px’,
width: ‘+=150px’
});
});
});
</script>
</head>
<body>
<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>
[/php]
خروجی این مثال را در این لینک ببینید.
در متد ()jQuery animate میتوانید از مقادیر از پیش تعریف شده استفاده کنید:
میتوان صفت انیمیشن را با مقادیر show ، hide ، toggle تعیین کرد.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>
[/php]
خروجی این مثال را در این لینک ببینید.
متد ()jQuery animate از قابلیت های صف استفاده میکند:
به طور پیش فرض jQuery دارای قابلیت صف برای انیمیشن ها است.
این بدان معناست که اگر چندین انیمیشن تماس را بعد از یکدیگر بنویسید.
jQuery با این متد های تماس ، یک صف داخلی ایجاد میکند.
سپس انیمیشن های تماس را یک به یک اجرا میکند.
مثال :
[php]
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
var div = $(“div”);
div.animate({height: ‘300px’, opacity: ‘0.4’}, “slow”);
div.animate({width: ‘300px’, opacity: ‘0.8’}, “slow”);
div.animate({height: ‘100px’, opacity: ‘0.4’}, “slow”);
div.animate({width: ‘100px’, opacity: ‘0.8’}, “slow”);
});
});
</script>
</head>
<body>
<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>
[/php]
خروجی این مثال را در این لینک ببینید.
