انیمیشن ها در جی کوئری
آموزش جی کوئری --> جلسه اول --> قسمت ششم : در ابن مقاله ، بطور مختصر درباره تابع animate در جی کوئری که وظیفه انجام انیمیشن دارد ، صحبت می کنیم .

در مقاله قبل ، بطور مختصر در باره رویدادهای جی کوئری صحبت کردیم . اکنون در این مقاله می خواهیم به معرفی و توضیح مختصر انیمیشن در جی کوئری بپردازیم . در فصلهای آینده ، بطور مفصل تر در این باره صحبت خواهیم کرد .

قابلیت جالب دیگر در جی کوئری انیمیشن ها می باشند که توسط تابع animate پیاده سازی می شوند . در مثالی که برای انیمیشن ها در نظر گرفتیم ، یک button داریم با آیدی go و مانند مثالهای قبل ، یک div داریم با آیدی testDiv . میخواهیم با زدن دکمه Go ، انیمیشن هایی روی div اعمال شود .

فایل جدیدی بنام animation.html بسازید و مانند مثالهای قبل ، کتابخانه جی کوئری را به بخش head آن بیافزایید . حال در بدنه فایل html یعنی تگ body کدهای زیر را بنویسید :


    
    

میخواهیم استایلی را به باکس مذکور اعمال کنیم . پس کدهای زیر را داخل تگ head بنویسید :


    #testDiv {
        position: relative;
        width: 150px;
        height: 100px;
        margin: 10px;
        padding: 20px;
        background: #b3c8d0;
        border: 1px solid black;
        font-size: 16pt;
        cursor: pointer;
    }

در این مرحله به سراغ دستورات داخل بلاک script می رویم که کدهای جی کوئری لازم را برای صدا زدن تابع انیمیشن در آنجا تعریف کنیم .

توضیح کلی : می خواهیم باکس فوق ، بعد از فشردن دکمه Go ، ابتدا طولش ۴۰۰px شود و سپس ارتفاعش یعنی height به ۴۰۰px برسد . در مرحله بعد از سمت چپ صفحه ۲۰۰px فاصله بگیرد و در نهایت نیز border آن ضخیم شود .

به کد زیر دقت کنید :

                              
$("#go").click(function() {
    $("#testDiv").animate({width: 400}, 300)
    .animate({height: 300}, 400)
    .animate({left: 200}, 500)
    .animate({top: "+=100", borderWidth: 10}, "slow")
});

توضیح : مشاهده می کنید که ۴ بار از تابع animate استفاده کرده ایم و به ترتیب width , height , left , borderWidth را تحت تاثیر قرار داده ایم . بعنوان مثال animate({width:400px}, 300) به این معنی می باشد که در طول مدت زمان ۳۰۰ میلی ثانیه ، طول div را از هر چه که هست به ۴۰۰ پیکسل برسان .

نکته : در دستور آخر دو عملیات روی div بطور همزمان اعمال می شود . گفته ایم که با سرعت slow بطور همزمان div هم از بالا ۱۰۰ پیکسل فاصله بگیرد و هم ضخامتش به ۱۰ پیکسل برسد .

جلسه اول در اینجا به پایان می رسد . در جلسه بعد ، بیشتر وارد جزئیات مفاهیمی چون سلکتور-رویداد-انیمیشن می شویم .


برچسب‌ها:

animationآموزش انیمیشنانیمیشن ها در جی کوئری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دو × چهار =