031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » jquery » رویداد hover در جی کوئری-درس نهم

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

۲۸ام شهریور ۱۳۹۶
رعنا زارع
0
77

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

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

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

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

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

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

$ ( " selector " ).hover ( inFunction , outFunction ) ;

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

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

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

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

<div class="menu">

           <ul>

               <li>

                   <span> منوی اصلی - خدمات وبیار </span>

                   <ul class="children">

                       <li>زیر منوی اول – طراحی سایت </li>

                       <li>زیر منوی دوم – طراحی فروشگاه اینترنتی </li>

                       <li>زیر منوی سوم – سئو سایت</li>

                   </ul>

               </li>

           </ul>

</div>

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

.menu{

margin: 15px;

text-align: right;

direction: rtl;

}

.menu > ul{

margin: 0;

padding: 0;

list-style: none;

}

.menu > ul > li{

padding: 15px;

font: 13px/25px yekan;

}

.menu > ul > li span:hover{

cursor: pointer;

background-color:red;

}

.menu > ul > li .children{

display: none;

}

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

$(document).ready(function(){

                   $(".menu > ul > li > span").hover(function(){

                           $(".children").slideDown("slow");

                       },function(){

                           $(".children").slideUp("slow")

                   });

});

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

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

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

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
رعنا زارع

مطالب مرتبط

طراحی سایت فرهنگی سایت کودک

طراحی سایت فرهنگی کودک خلاق

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

طراحی سایت بازرگانی ایراکو

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

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا

طراحی سایت خدماتی کانون ایران فردا طراحی سایت اختصاصی کانون ایران فردا با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت وب یار می باشد. این سایت در زمینه ی معرفی متخصصین، ثبت آگهی و معرفی مشاغل فعالیت دارد. همچنین در سایت کاف ( کانون ایران فردا ) فروشگاه اینترنتی راه […]

طراحی سایت اختصاصی آجیل بازار

طراحی سایت خدماتی آجیل بازار

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

ارسال دیدگاه

*    

*