logo
logo
تبلیغ کلیکی تاپ سایت 98

دستور animate و انیمیشن در جی کوئری

دستور animate و انیمیشن در جی کوئری
هدایت عباسی آموزش جی کوئری

آمورش ویدئویی دستور animate

دانلود فیلم و آموزش ویدئویی دستور animate در جی کوئری. در این فیلم با این دستور و نحوه کار با آن آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش با دستور animate و ساخت انیمیشن در جی کوئری آشنا میشویم. با سینتکس این دستور ، callback ، مدت زمان یا duration همراه با مثال و توضیحات کامل. کدها تست شده می باشند.

در این بخش از آموزش جاوا اسکریپت (javascript)  و جی کوئری از تاپ سایت 98 به سراغ دستور animate یا انیمیشن در جی کوئری می رویم.

از متد jQuery animate ()  برای ایجاد و ساخت انیمیشن های سفارشی استفاده می شود.

سینتکس دستور animate

نحو یا سینتکس دستور animate را می توانید در قسمت زیر ببینید.

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

سرعت دستور animate یا انیمیشن ، طول اجرای دستور را مشخص می کند. این مقادیر می توانند موارد زیر را داشته باشد: آهسته، سریع یا میلی ثانیه.

پارامتر callback اختیاری یک تابع است که پس از تکمیل انیمیشن تکمیل می شود.

مثال دستور animate

در مثال زیر با دستور animate تگ div را از بالا به سمت پایین حرکت می دهیم.

با کلیک روی دکمه انیمیشن اجرا می شود. برای این کار از رویداد کلیک استفاده کردیم.

باید در نظر داشته باشید ما ابتدا یک باکس را ایجاد کرده ایم.

کار انیمیشن فقط تغییر css است.

کدها را در یک فایل با پسوند html ذخیره کرده و اجرا نمایید تا نتیج را ببینید.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({top: '250px'});
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:darkslategrey; height:80px;width:80px; position:absolute;color: #fff" >TopSite98</div>
</body>
</html>

ساخت انیمیشن در جی کوئری

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

در این آموزش ، چندین مثال خواهیم داشت.

در مثال زیر ما یک عکس را به صورت جذاب محو و مخفی میکنیم.

کد زیر را تست کرده و نتیجه را ببینید. حتما یک تصویر به نام a.jpg را در کنار فایل html قرار دهید.

با کلیک روی متن ، تصویر به صورت چرخشی ، محو شده و پنهان می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/ jquery.min.js"></script>
</head>
<body>
<div id="clickme">
Click here
</div>
<img id="book" src="a.jpg" alt="" width="90" height="130"
style="position: relative; left: 10px;">
<script>
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
</script>
</body>
</html>

آموزش duration در دستور animate

حال قصد داریم آموزش duration در دستور animate را توضیح دهیم.

ما می توانیم مدت زمان اجرای انیمیشن را مشخص کنیم. در مثال زیر مدت زمان اجرا 2.5 ثانیه می باشد که معادل 2500 می باشد. هر یک هزار معادل یک ثانیه میباشد.

ما می توانیم بجای عدد از fast  یا slow نیز استفاده کنیم.

در این مثال یک باکس کوچک ایجاد کرده ایم، سپس با دستور animate انیمیشنی را ایجاد می کنیم.

این باکس با کلیک روی دکمه بزرگ می شود.

<!doctype html>
<html>
<head>
<style>
div {
background-color: #bca;
width: 90px;
border: 1px solid green;
}
</style>
<script src="https://code.jquery.com/ jquery-1.10.2.js"></script>
</head>
<body>
<button id="go"> &raquo; Run</button>
<div id="block" >TopSite98</div>
<script>
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "75%",
opacity: 0.6,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 2500 );
});
</script>
</body>
</html>

آموزش callback در جی کوئری

حال به سراغ آموزش callback در جی کوئری می رویم.

در مثال زیر با callback آشنا می شوید. در این مثال ابتدا دستور hide اجرا شده و پس از پایان دستور ، تابع (function) اجرا می شود.

یعنی ابتدا دستور مخفی شدن اجرا می شود و سپس alert اجرا می شود و پیغام نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/ libs/jquery/3.3.1/ jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow", function(){
alert("TopSite98.com");
});
});
});
</script>
</head>
<body>
<button>Hide</button>
<p>callback jquery</p>
</body>
</html>

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید

دوره ارز دیجیتال تاپ سایت 98

منبع: تاپ سایت 98

تگ:

دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.