hoverIntent : پلاگین jQuery برای رفع مشکل ناخواسته hover

- visibility ۴ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام hoverIntent رو خدمت شما معرفی کنم و اونو آموزش بدم.

 

با استفاده از این پلاگین میتونین مشکلات ناخواسته ای که گاهی اوقات هنگام استفاده از متد hover جی کوئری پیش میاد رو ، رفع کنید.

میبینید دو تا مربع به رنگهای قرمز و آبی وجود داره. در مربع قرمز رنگ از متد hover جی کوئری استفاده شده ، ولی در مربع آبی رنگ از متد hoverIntent مربوط به این پلاگین استفاده شده. چند بار ماوس رو روی مربع قرمز جابجا کنید ، یعنی مدام ماوستون رو خارج و وارد کنید ، میبینید که با ظاهر نامناسبی المنت شروع به بزرگ و کوچک شدن میکنه. ولی مربع آبی رنگ تا زمانی که ماوس رو روی اون نگه نداریم ، کار نخواهد کرد و مشکل مربع قرمز رو نداره.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و hoverIntent.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

هدف کلی این پلاگین اینه که تا زمانی که کاربر واقعا قصد هاور رو نداره ، کدهای مربوط به هاور اجرا نشه. میبینید که در بالا دو تا div قرار دادیم و استایلهای مورد نظر رو بهشون دادیم. من میخوام در ابتدا با استفاده از متد hover جی کوئری کاری کنم که ، زمانی که کاربر هاور کرد ، بطور انیمیشنی ارتفاع 200 پیکسل زیاد بشه و وقتی که ماوسش رو خارج کرد ، 200 پیکسل کم بشه. برای اینکار میتونیم به صورت زیر عمل کنیم :

اگه با متد hover آشنا باشین ، میدونین که کدهایی که درون تابع اول مینویسیم ، در زمان mouseover اجرا میشه و کدهای موجود در تابع دوم در زمان mouseout اجرا میشه. اگر حالا امتحان کنید ، دوباره همون مشکل پیش میاد.

حالا برای استفاده از این پلاگین میتونین بصورت زیر عمل کنید. در اینجا بجای استفاده از متد hover ، باید از متد hoverIntent استفاده کرد. بصورت زیر :

متد hoverIntent چند ویژگی داره که دوتا از مهماشو در بالا دیدید :

  • over : باید تابعی رو قرار بدیم که محتوی کدهایی هست که قصد داریم در زمان mouseover اجرا بشن
  • out : باید تابعی رو قرار بدیم که محتوی کدهایی هست که قصد داریم در زمان mouseout اجرا بشن

این متد ویژگی های دیگه ای هم داره که خودتون میتونین اونا رو مطالعه کنید.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران
kalhor

سلام استاد
بسیار عالی این همون چیزیه که میخواستم
اما وقتی به آیدی مورد نظرم اونو میدم اصلا اجرا نمیشه؟

محمد اسفندیاری

کدتون رو آپلود کنید و لینک بدید

kalhor

این لینک قالب:
http://bg-design.net/test/Papular.zip

الان کد اسلاید داون روی منو هست اما هر چی کردم هاور اینتنت جواب نداد

محمد اسفندیاری

دوست عزیز کامل بدین
پس کدهایی که خودتون نوشتین کجا هستن؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.