دستور animate و انیمیشن در جی کوئری
آمورش ویدئویی دستور animate
دانلود فیلم و آموزش ویدئویی دستور animate در جی کوئری. در این فیلم با این دستور و نحوه کار با آن آشنا می شوید.
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالادر این بخش از آموزش با دستور animate و ساخت انیمیشن در جی کوئری آشنا میشویم. با سینتکس این دستور ، callback ، مدت زمان یا duration همراه با مثال و توضیحات کامل. کدها تست شده می باشند.
در این بخش از آموزش جاوا اسکریپت (javascript) و جی کوئری از تاپ سایت 98 به سراغ دستور animate یا انیمیشن در جی کوئری می رویم.
از متد jQuery animate () برای ایجاد و ساخت انیمیشن های سفارشی استفاده می شود.
سینتکس دستور animate
نحو یا سینتکس دستور animate را می توانید در قسمت زیر ببینید.
سرعت دستور animate یا انیمیشن ، طول اجرای دستور را مشخص می کند. این مقادیر می توانند موارد زیر را داشته باشد: آهسته، سریع یا میلی ثانیه.
پارامتر callback اختیاری یک تابع است که پس از تکمیل انیمیشن تکمیل می شود.
مثال دستور animate
در مثال زیر با دستور animate تگ div را از بالا به سمت پایین حرکت می دهیم.
با کلیک روی دکمه انیمیشن اجرا می شود. برای این کار از رویداد کلیک استفاده کردیم.
باید در نظر داشته باشید ما ابتدا یک باکس را ایجاد کرده ایم.
کار انیمیشن فقط تغییر css است.
کدها را در یک فایل با پسوند 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 قرار دهید.
با کلیک روی متن ، تصویر به صورت چرخشی ، محو شده و پنهان می شود.
<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 انیمیشنی را ایجاد می کنیم.
این باکس با کلیک روی دکمه بزرگ می شود.
<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"> » 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 اجرا می شود و پیغام نمایش داده می شود.
<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
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید