• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6245 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

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

4 2053 ۲۴ بهمن ۹۳

در این مطلب میخوام یک پلاگین 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 اجرا بشن

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

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 4 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏

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

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram