تبلیغات

تبلیغات
طراحی و بهینه سازیمشاهده

هاست

آموزش ایجاد افکت shake + جی کوئری

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند
آموزش ایجاد افکت shake + جی کوئریReviewed by Admin on Jul 21Rating:

در پست امروز دنیای جی کوئری، سری به تابع ()animate زدیم و با استفاده از اون، یک افکت جذاب و متفاوت رو برای شما همراهان عزیز آماده کردیم. در این افکت – که نام اون رو shake گذاشتیم – خواهید دید که چطور میشه با استفاده از تابع animate و چند کد ساده دیگه، زمین و زمان رو به لرزه در آورد .

آموزش ایجاد افکت shake + جی کوئری

خوب! پیش از هرکاری، اول باید کتابخانه جی کوئری رو در قالبتون فراخوانی کنید…
و در مرحله بعد، تابعی رو با نام shake، به صورت زیر تعریف میکنیم: (این تابع رو میتونید در یک فایل js یا داخل تگ script به کار ببرید)

JQUERY:

 

سه بخش اصلی در قطعه کد بالا عبارتند از:

  1. استفاده از پروپرتی position:relative  که موقعیت عنصر رو نسبت به حالت استاتیک تنظیم میکنه.
  2. تعریف یک حلقه جهت کنترل تعداد دفعات لرزه.
  3. استفاده از 4 تابع animate که موقعیت عنصر ارسالی ما رو نسبت به مبدأ و وضعیت left، به صورت انیمیشنی جا به جا میکنند.

و کار تموم.

فقط در مرحله آخر، کافیه که یک عنصر رو به همراه تابع shake فراخوانی کنید. به عنوان نمونه:

لرزش یک div فرضی، در صورت کلیک بر روی آن!

JQUERY:


به کانال تلگرام بیست اسکریپت بپیوندید !

دانلود
.

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

مطلب مفیدی بود ؟
کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
3,631اسکریپت jQuery نمایش وضعیت آب و هوا Flat Weather تاریخ : 2015/09/2
2,480انتشار پنجمین شماره ماهنامه طراحی وب تاریخ : 2014/08/28
6,202ساخت گالری تصاویر کاملا واکنش گرا با جی کوئری تاریخ : 2014/11/9
7,672آموزش وردپرس افزودن ابزارک به قالب وردپرس تاریخ : 2015/02/22
2,641صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
3,819اسلایدر بسیار پیشرفته جی کوئری در ۱۴ طرح تاریخ : 2013/11/24
356آموزش ساخت صفحه ابر برچسب ها در وردپرس تاریخ : 2018/06/2
2,768آموزش تغییر عنوان ایمیل های ارسالی در وردپرس تاریخ : 2014/06/6
4,257آموزش اجرای متد ها در jquery تاریخ : 2013/11/21
4,472ایجاد انیمیشن متنی با Textillate به صورت جی کوئری تاریخ : 2014/07/13
2,115دانلود عنصر های انتخاب بسیار زیبا جی کوئری تاریخ : 2013/12/3
2,992کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید! تاریخ : 2013/10/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب