رویداد hover در جی کوئری-درس نهم

آخرین بروز رسانی: شهریور ۱۸, ۱۳۹۶

آموزش جی کوئری :

در این جلسه از آموزش های جی کوئری به معرفی و آشنایی بیشتر با یکی از پرکاربرد ترین عناصر زبان جی کوئری در طراحی افکت های زیبا بنام رویداد hover خواهیم پرداخت همین طور سعی می کنیم با آوردن مثال کاربردی، استفاده از رویداد hover  را برای شما ملموس تر سازیم . با وبیار همراه باشید.

رویداد hover درجی کوئری:

در رویداد hover  شما میتوانید از وجود دو تابع به صورت همزمان در هنگام عبور موس از روی عنصر مورد نظر بهره مند شوید. تابع اول در هنگام ورود موس بر روی عنصر و تابع دوم در هنگام خروج موس از روی عنصر اجرا می شود .

به عبارت دیگر شما میتوانید تعیین کنید زمانی که موس  بر روی عنصر رفت چه اتفاقی رخ دهد و زمانی که موس از روی عنصر برداشته شد  چه اتفاقی بیافتد . یعنی دو حالت را تعریف کنید.

شکل کلی استفاده از این متد به شرح زیر است :

selector : selector ، تعیین کننده  عنصری است که می خواهیم رویداد hover  هنگام عبور از روی آن اتفاق بیفتد .
inFunction : این تابع زمانی اتفاق می افتد که موس بر روی عنصر مورد نظر وارد می شود . یعنی زمانی  که رویداد mouseenter رخ می دهد .
outFunction : این تابع زمانی اتفاق می افتد که موس از روی عنصر مورد نظر خارج می شود . یعنی زمانی که رویداد mouseleave رخ می دهد .
نکته مهم : اگر فقط یک تابع در دستور رویداد hover تعیین شود ، این تابع برای هر رویداد اجرا می شود .

برای درک بهتر نحوه عملکرد رویداد hover به مثال پر کاربرد ساخت زیر منو توجه فرمایید:

فرض کنید ، یک منو داریم که با قرار گرفتن موس روی منو یک زیر منو بازمی شود  و زمانی که موس از روی منو برداشته شد ، زیر منو حذف یا به عبارتی پنهان شود.

ابتدا منو را با کد html پیاده سازی می کینم:

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

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

در کد بالا تعریف کردیم که با قرار گرفتن موس روی span عنصر children با رویداد slideDown  بصورت کشویی باز شود و زمانی که موس از روی span برداشته شد، عنصر children با رویداد slideUp بصورت کشویی بسته شود .

سعی کنید یک بار این کد ها را از ابتدا مرور کرده وخود آنها را پیاده سازی کنید و یا حتی حالت های مختلفی بر روی توابع hover  آن از جمله تغییر فونت ، رنگ فونت و یا پس زمینه را امتحان کنید.

ممنون از همراهی شما وبیاری های گرامی .

فراموش نکنید تیم وبیار با وجود داشتن تجربه فراوان و کارشناسان زبده می تواند بهترین انتخاب برای طراحی سایت و سئوسایت شما باشد.

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

تمام پشتیبان ها در حال پاسخ به مشتریان هستند. لطفا درخواست خود را ارسال نمایید تا در کوتاه ترین زمان ممکن با شما تماس بگیریم.

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا