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

افکت 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 وجو دارد.
    کله اینترنت و زیره رو کردم پیدا نکردم اموزشه همچین چیزیو ممنون میشم قرار بدید یا لینک معرفی کنید.

    0

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

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

    0

    توسط hossein پاسخ

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

    0

    توسط nasrin پاسخ

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

      0

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

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

    0

    توسط حسن پاسخ

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

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

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

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

    0

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

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

    0

    توسط mohammad پاسخ

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

      0

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

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