خرید هاست ارزدیجیتال
حراجی دامنه های ویژهمشاهده





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

آموزش ایجاد افکت 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
کلمات کلیدی پست :
مطالب مرتبط
11,416نمایش تاریخ آخرین آپدیت پست های وردپرس تاریخ : 2015/07/29
9,955آموزش ساخت autocomplete با کمک php و JQuery تاریخ : 2014/07/16
12,449اسکریپت افکت قطرات باران در تصاویر تاریخ : 2014/07/24
23,964آموزش استاندارد های طراحی و تولید وب سایت تاریخ : 2014/06/15
13,095نمایش مطالب مرتبط بدون افزونه در وردپرس تاریخ : 2015/08/2
13,228جاوا اسکریپت چیست و چه کاربردی دارد؟ تاریخ : 2019/04/27
11,548اسلایدر سه بعدی بسیار زیبای جی کوئری تاریخ : 2013/11/2
7,428قرار دادن قسمت درباره نویسنده در وردپرس تاریخ : 2018/06/5
4,412جلوگیری از حملات sql injection با کد htaccess تاریخ : 2021/12/20
68,334آموزش ارسال اطلاعات یک فرم به ایمیل تاریخ : 2013/10/26
10,772پلاگین جی کوئری صفحه بندی برای بوت استرپ تاریخ : 2014/02/9
18,121کد ساعت بسیار زیبای جی کوئری تاریخ : 2018/02/27
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file