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

متنوع ترین سرویس های هاستینگ با 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 در جی کوئری

مطالب مرتبط

14,392حل مشکل فضای خالی بالای سایت وردپرس 1 تاریخ : 2018/05/31

10,922پلاگین ابزار رنگ ها به سبک فتوشاپ به صورت جی کوئری 1 تاریخ : 2014/02/25

11,144پلاگین جی کوئری دکمه اشتراک گذاری مطالب در موبایل 1 تاریخ : 2016/04/30

13,761اسکریپت جی کوئری تاریخچین با طراحی متریال DateDropper تاریخ : 2017/03/3

10,528پلاگین جی کوئری Slickhover تاریخ : 2016/02/21

10,276پخش کننده صوتی Toneden به صورت جی کوئری 4 تاریخ : 2014/05/7

20,049آموزش ساخت تب جی کوئری و سی اس اس 10 تاریخ : 2014/09/2

11,928کد جی کوری : تکه کدهای جی کوری مفیدی که باید یاد بگیرید! 4 تاریخ : 2013/10/20

11,351Nofollow نمودن خودکار لینک ها 1 تاریخ : 2014/01/10

13,241دانلود اسلایدر بسیار زیبا جی کوئری 2 تاریخ : 2013/11/25

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

15,584ساخت منوی باز شونده برای سایت با استفاده از بوت استرپ تاریخ : 2019/11/16

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

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

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

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

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

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

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

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

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

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

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

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

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

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

دسته بندی ها

تبلیغات

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

گجت وبلاگ

تبلیغات متنی

خبرنامه

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

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

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

دسته بندی ها

تبلیغات

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

گجت وبلاگ

تبلیغات متنی