031- 344 500 60

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

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

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

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

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

در این جلسه از آموزش های جی کوئری به معرفی و آشنایی بیشتر با یکی از پرکاربرد ترین عناصر زبان جی کوئری در طراحی افکت های زیبا بنام رویداد 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  آن از جمله تغییر فونت ، رنگ فونت و یا پس زمینه را امتحان کنید.

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

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

رویداد hover در جی کوئری-درس نهم
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
رعنا زارع

مطالب مرتبط

طراحی سایت فروشگاهی

طراحی سایت فروشگاهی میک رویال

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

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس

نحوه ی ساخت پست تایپ سفارشی در وردپرس در طول سال های گذشته وردپرس به یک سیستم مدیریت محتوای قوی تبدیل شده است. به طور پیش فرض وردپرس دارای مجموعه ای پست تایپ می باشد. به عنوان مثال برگه ها یا نوشته ها در وردپرس نوعی پست تایپ محسوب می شوند. با این وجود شما […]

نکات مهم در طراحی سایت

طراحی سایت

اهمیت طراحی سایت طراحی سایت برای داشتن یک کسب و کار موفق و پردرآمد و برای به دست آوردن اعتبار در زمینه شغلی اهمیت ویژه ای دارد. برای بالا بردن ارزش یک ‌سایت و جذب بازدیدکنندگان به هیچ معجزه ای احتیاج ندارید فقط باید نکات و اصول طراحی سایت را رعایت کنید. در این مقاله […]

طراحی گرافیک سایت

طراحی گرافیک سایت

طراحی گرافیکی سایت: اگر همه سعی و تلاش خود را پای این موضوع که کاربران فقط به سایت شما وارد شوند بگذارید، باید بدانید که کاملا در اشتباه هستید. اگر طراحی سایت از گرافیک خوبی برخوردار نباشد و برای کاربر جذابیتی نداشته باشد کاربر به محض ورود به سایت از سایت خارج می گردد و […]

ارسال دیدگاه

*    

*