ایجاد افکت لرزش Shake با جی کوئری

ایجاد افکت لرزش Shake با جی کوئری

در این مقاله می خواهیم روش ایجاد افکت لرزش Shake با جی کوئری را بررسی کنیم.  افکت لرزش در jQuery یا همان Shake باعث می شود که المنت HTML در جهات عمودی و افقی یک حرکت سریع و کوتاه انجام دهد. همانطور که می دانید در Jquery ui ما افکت shake را داشتیم اما در اینجا می خواهیم با متد Animate جی کوئری خودمان این افکت را ایجاد کنیم.

افکت Shake با جی کوئری

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

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. استفاده از ۴ تابع animate که موقعیت عنصر ارسالی ما را نسبت به مبدأ و وضعیت left، به صورت انیمیشنی جا به جا می کنند.

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

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