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

دسته‌ها : آموزش, جی کوئری علی میرزائی 9 دیدگاه‌ها

افکت 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;
}

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

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

و کار تموم 😉

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

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

JQUERY:

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

دیدگاه کاربران در مورد این نوشته

  1. با عرض سلام و خسته نباشید.
    ببخشید میخواستم خواهش کنم یک اموزش هم راجب واکنش گرا بودن چند عکس به حرکت ماوس هم در سایت قرار بدید.
    نمونه ی این خواسته بنده در سایت http://azmoon360.com وجو دارد.
    کله اینترنت و زیره رو کردم پیدا نکردم اموزشه همچین چیزیو ممنون میشم قرار بدید یا لینک معرفی کنید.

    توسط محمدحسین پاسخ

  2. عالی بود مرسی

    توسط hossein پاسخ

  3. سلام چرا وقتی کدهای جی کوئری رو در یک فایل جداگانه میارم و در صفحه html پیوست میدم کار نمیکنه حتی وقتی داخل تگ head هم مینویسم هم کار نمیکنه و فقط داخل تگ body عمل میکنه؟

    توسط nasrin پاسخ

    1. سلام، ممکنه آدرس دهی اشتباه کرده باشید + کدهاتون باید بعد از کتابخانه JQuery قرار بگیرن.

      توسط علی میرزائی پاسخ

  4. سلام
    مطلب جالبی بود
    خیلی به دردم خورد.
    حالا یه سوال ؟؟؟
    اگه بخوام صفحه که لود میشه ، این کلید خودش به طور خودکار این افکت رو داشته باشه و در فاصله زمانی های مشخص این افکت تکرار بشه ، چه باید بکنم؟

    توسط حسن پاسخ

    1. سلام. یه راه حل ساده، استفاده از حلقه و تابع delay به صورت زیر:

      for(var i=0; i<1000; i++)
      {
         $( "#divexample2" ).shake().delay(5000);
      }

      توسط علی میرزائی پاسخ

  5. خیلی ممنون از این مطلب
    خیلی جالب بود.
    www.arize.ir
    ممنون میشم اگه از وبسایت بنده هم دیدن کنید.

    توسط محمود پاسخ

  6. مرسی علی جون! راستی پستی که توی همیار وردپرس دادی معرکه بود! دمت واقعاً گرم! افزونه خوبیه! نصبش کردم! با کلاس!:P

    توسط mohammad پاسخ

    1. خواهش میکنم،
      خوشحالم که خوشت اومده {گل}
      ولی چرا تو مخزن بهش 5 امتیاز ندادی؟! 😉

      توسط علی میرزائی پاسخ

دیدگاه خود را بیان کنید