خرید هاست ارزان ایران / آلمان

متنوع ترین سرویس های هاستینگ با CPANEL افزودن دامنه - ایمیل - mysql نامحدود پرداخت بصورت ماهانه / سه ماهه / شش ماهه / سالانه SSL رایگان حتی برای دامنه های IR راه اندازی آنی پشتیبانی 24 ساعته ، یکماه ضمانت بازگشت وجه امکان استفاده از شتابدهنده و پکیج تضمین امنیت وردپرس مشاوره آنلاین روی سایت | 02154109999 | talashnet.com

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

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

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

خوب! پیش از هرکاری، اول باید کتابخانه جی کوئری رو در قالبتون فراخوانی کنید…
و در مرحله بعد، تابعی رو با نام 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;
}

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

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

و کار تموم.

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

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

JQUERY:

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

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

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

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

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

دانلود

دانلود حجم 3.72 کیلوبایت
پیش نمایش
مشکلی دارید؟ جواب خود را در پست فروم بگیرید
منبع : بیست اسکریپت لطفا رعایت کنید

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

مطلب مفیدی بود ؟

نویسنده : تیم محتوای 20اسکریپت 4 آموزش ها , جی کوئری , متفرقه , مقالات,آموزش,ترفند

لینک کوتاه مطلب : https://www.20script.ir/?p=7572

کلمات کلیدی پست :

shake در جاوا اسکریپت, آموزش, آموزش ایجاد افکت shake + جی کوئری, آموزش ایجاد لرزش در یک div, آموزش جی کوئری, آموزش های جی کوئری, افکت انیمیشنی توسط JQuery, افکت لرزش جی کوئری, جی کوئری, مثال animate در جی کوئری

مطالب مرتبط

4,752جلوگیری از حملات sql injection با کد htaccess تاریخ : 2021/12/20

18,934اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 2017/10/30

8,156ایجاد محدودیت در تعداد حروف دیدگاه های وردپرس 1 تاریخ : 2016/07/10

11,921آموزش تغییر نویسنده مطالب در وردپرس تاریخ : 2016/10/19

13,231اسلایدر بسیار پیشرفته جی کوئری در ۱۴ طرح 8 تاریخ : 2013/11/24

16,072تبدیل تصاویر به صورت یک نقشه با MobilyMap تاریخ : 2019/11/8

8,957اسکریپت نمایش فن پیج فیسبوک در وبسایت Famax نسخه 5.3 تاریخ : 2016/03/30

20,673اسلاید بندی تصاویر پس زمینه وبسایت با استفاده از backstretch 4 تاریخ : 2014/07/20

12,908اسلاید تمام صفحه و لغزان به صورت جی کوئری تاریخ : 2016/08/3

16,252پلاگین جی کوئری شمارنده اعداد FlipCounter تاریخ : 2015/07/12

11,580آموزش ساخت منو ثابت با کمک جی کوئری 4 تاریخ : 2014/07/30

8,036روش های افزایش سرعت ایندکس مطالب در گوگل تاریخ : 2018/07/12

برخی از قالب های وبلاگ - بیست اسکریپت

قالب عشق بین انگشت ها

قالب دخترونه و آرایش

قالب زیبای ماشین

قالب فانتزی و طنز چِشم

قالب دختر رویایی

قالب وبلاگ دکوراسیون

قالب وبلاگ کلبه و درخت

قالب دختر زیبا

قالب پسرونه غمگین

قالب عاشقانه قلب

خرید هاست ارزان ایران / آلمان

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

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

دسته بندی ها

تبلیغات

محبوب ترین مطالب

گجت وبلاگ

تبلیغات متنی

خبرنامه

خرید هاست ارزان ایران / آلمان

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

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

دسته بندی ها

تبلیغات

محبوب ترین مطالب

گجت وبلاگ

تبلیغات متنی