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

افکت های پایه ای

()hide : عناصر موجود در مجموعه مطابق را مخفی می کند:

duration زمان اجرای انیمیشن و callback تابعی است که به محض خاتمه اجرای انیمیشن اجرا می شود:

مثال:

مثال۲:

()show : عناصر موجود در مجموعه مطابق را نمایان می کند:

duration زمان اجرای انیمیشن و callback تابعی است که به محض خاتمه اجرای انیمیشن، اجرا می شود:

مثال۱:

مثال۲:

()toggle :

عناصر موجود در مجموعه مطابق را مخفی یا نمایان می کند:

متغییر بولی نشان دهنده نمایش یا عدم نمایش شی است:

duration زمان اجرای انیمیشن و callback تابعی است که به محض خاتمه اجرای انیمیشن، اجرا می شود:

مثال۱:

مثال۲:

انیمیشن های fade

()fadeIn : عناصر موجود در مجموعه را نمایان می کند:

duration زمان اجرای انیمیشن و callback تابعی است که به محض خاتمه اجرای انیمیشن، اجرا می شود:

()fadeOut : عناصر موجود در مجموعه را محو می کند:

duration زمان اجرای انیمیشن و callback تابعی است که به محض خاتمه اجرای انیمیشن، اجرا می شود:

مثال۱:

مثال۲:

()fadeTo : مقدار Opacity شی را تعیین می کند:

Opacity عددی بین صفر و یک که شفافیت عنصر را تعیین می کند:

مثال۱:

مثال۲:

()fadeToggle : عناصر موجود در مجموعه مطابق را با انیمیشن کردن شفافیتش نمایان یا محو می کند:

مثال:

انیمیشن های sliding

()slideUp و ()slideDown : عناصر موجود در مجموعه مطابق را با انیمیشن slide محو یا نمایان می کند.(همانند پرده به بالا یا پایین)

مثال۱:

مثال۲:

مثال۳:

()slideToggle : عناصر موجود در مجموعه مطابق را با sliding نمایان یا محو می کند:

مثال:

انیمیشن های سفارشی

()animate : یک انیمیشن سفارشی را بر اساس یک مجموعه از خصوصیات css اجرا می کند.

properties یک مجموعه از خصوصیات css است، که انیمیشن بر اساس آن اجرا می شود. complete تابعی است که پس از اجرای انیمیشن اجرا می شود:

options گزینه هایی هستند که برای تابع ارسال می شوند و شامل این موارد می شوند: duration ، easing ، complete ، step ، queue ، specialEasing

step در هر گام اجرای انیمیشن اجرا می شود. queue مقدار بولی است که تعیین می کند، انیمیشن در صف اجرا قرار گیرد یا بلافاصله اجرا شود.(اگر false باشد بلافاصله اجرا می شود). specialEasing یک یا چند خصوصیت css است که برای تابع easing استفاده می شود.(اغلب خصوصیات css که عددی هستند، قابل استفاده هستند)

مثال۱:

مثال۲:

مثال۳:

مثال۴:

()stop : انیمیشن جاری در حال اجرا را متوقف می کند:

پارامتر اول تعیین می کند که انیمیشن از صف خارج شود یا نه(پیش فرض false است ) و پارامتر دوم در صورت true بودن انیمیشن را مجبور به اتمام می کند(پیش فرض false است)

مثال:

()delay : یک تایمر را برای تاخیر در اجرای دنباله ای از عناصر در صف ست می کند:

مثال:

image_pdfدانلود فایل pdf این مقاله
کلیدواژه ها :

این خبر را به اشتراک بگذارید :