STUDY SYSTEM WEBSITE Edit : 2019.08.05 Update : 2023.01.24

MENUをslideDown / slideUpさせたときに高速ホバーで開閉し続ける問題の制御

タイトルややこし…w
サイト制作でMENUをヌルっと出したりする場合、slideDown / slideUpを使うと、とても楽に実装ができます。

$(document).ready(function(){
  $('.la_menu').hover(
    function() {
      $('.child').slideDown();
    },
    function() {
      $('.child').slideUp();
    }
  );
});

$(document).ready(function(){

$('.la_menu').hover(

function() {

$('.child').slideDown();

function() {

$('.child').slideUp();

}

);

});

LANGUAGE ▼
- 日本語
- 한글어
- 中文
- ภาษาไทย
- English

ただこのままでは、「Language」枠内と枠外を高速でマウスホバー・アウトした場合、動作がとまることなくホバーした回数分だけニュルニュル動き続けます😅
そこで以下のように、stop()関数を挟むと、制御されました!

$(document).ready(function(){
  $('.la_menu').hover(
    function() {
      $('.child').stop().slideDown();
    },
    function() {
      $('.child').stop().slideUp();
    }
  );
});