آموزش جی کوئری درس 7: حرکت عناصر صفحه با جی کوئری


تابع animate یکی از جذاب ترین توابع جی کوئری است.

کار این تابع اینه که 3 تا ورودی می گیره که اولی یکی از خصوصیات css تگ مورد نظرتونه و دومی مقدار نهایی خصوصیت css است و در نهایت سرعت رسیدن به مقدار نهایی رو مشخص می کنین.

مثلا:
با فرض اینکه ارتفاع تگ من 200 پیکسل باشه :

در کد بالا من مشخص کرده ام که ارتفاع تگ مورد نظرمو کم کم به مقدار 0 برسونه ، بدین صورت کد من مثل تابع slideUp عمل می کنه


حال اگر کدمو به شکل زیر تغییر بدم :


دستور بالا عملکردی متفاوت خواهد داشت ، یعنی کم کم ارتفاع تگ منو از مقدار اصلیش (که مثلا اینجا 200 پیکسله) به مقدار 300 پیکسل می رسونه.

سایت آموزشی نت نیک
دقت کنین که شما باید درس به درس کد های منو روی سیستم خودتون بنویسین و تست بگیرین و عملکرد رو عینا ببینین تا عملکرد دقیق هر تابع رو به خوبی درک کنین ...


کد زیر رو تست کنین و نتیجه رو ببینین:


به نظرتون این کد به درد کجا می خوره ؟
راهنمایی: در پایین سایت ها حتما دکمه TOP رو دیدین که وقتی میزنین ، آرام به بالای صفحه منتقل میشین ؟!



تمرین بعدی : این کد چکاری انجام میده ؟



این چطور ؟


* اجرای همزمان دو دستور animate :
اگر بخواهیم همزمان چند خصوصیت css یکی از تگ های صفحه رو تغییر بدیم :

تا آموزشی دگر بدرود.
یا حق

نوشته شده در تاریخ جمعه 14 تیر 1392    | توسط: ح.م    | طبقه بندی: آموزش jQuery،     | نظرات()