ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

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

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

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

JQUERY:

jQuery.fn.shake = function() {
	this.each(function(i) {
		$(this).css({ "position": "relative" });
		for (var x = 1; x <= 3; x++) {
			$(this).animate({ left: -25 }, 50).animate({ left: 0 }, 10).animate({ left: 25 }, 50).animate({ left: 0 }, 10);
		}
	});
	return this;
}

 

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

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

و کار تموم.

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

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

JQUERY:

$( "#divexample2" ).click(function() {
  $( "#divexample2" ).shake();
});

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=7572
کلمات کلیدی پست :
مطالب مرتبط
10,083آموزش ساخت autocomplete با کمک php و JQuery تاریخ : 2014/07/16
15,733آموزش اجرای متد ها در jquery تاریخ : 2013/11/21
9,888آموزش تغییر عنوان ایمیل های ارسالی در وردپرس تاریخ : 2014/06/6
15,856آموزش اجرای فیلم در پس زمینه وب سایت توسط Html5 و CSS3 تاریخ : 2015/07/13
12,003محدود کردن تعداد برچسب ها در ابزارک ابر برچسب وردپرس تاریخ : 2014/04/17
12,021پلاگین زیبا و متحرک Loader سایت به صورت جی کوئری تاریخ : 2014/03/9
8,028ایجاد محدودیت در تعداد حروف دیدگاه های وردپرس تاریخ : 2016/07/10
18,308دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 2015/01/1
13,670دانلود فرم ارسال دیدگاه بسیار زیبا جی کوئری تاریخ : 2013/11/24
8,382افزودن خودکار کدهای دلخواه به انتهای مطالب در وردپرس تاریخ : 2016/04/20
11,488طرح آبی برای فرم ورود وردپرس + آموزش تاریخ : 2014/08/1
8,165نمایش آمار بازدید از مطالب بدون نیاز به افزونه تاریخ : 2014/08/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file