Jquery script issue

Question

Я довольно новый с jQuery.
Пытается написать простой сценарий, чтобы скользить и скользить вниз.

<script type="text/javascript"> 
$(document).ready(function() { 
    if ($('header').is(':visible')) { 
     $('header').hide(function() { 
      $(".masterhead").mouseover(function() { 
       $("header").slideDown('slow'); 
      }); 
     }); 
    } else { 
     $('.masterhead').mouseout(function() { 
      $('header').slideUp('slow'); 
     }); 
    } 

}); 
</script> 

Проблема заключается в том, когда я пытаюсь посмотреть его в браузере, он продолжает скольжение вверх и вниз, не правильный beahvior я надеялся, я попытался с SlideToggle, но то же самое происходит. Я пробовал много решений с этого сайта, но то же самое.
Буду признателен за любую помощь в этом.

Answer 1

проверить это, но убедитесь, что вы не хотите использовать $('#header') или $('.header') вместо $('header'):

$(document).ready(function() { 
     $('header').hide(); 
     $(".masterhead").hover(
     function() { 
      $("header").slideDown('slow'); 
     }, 
     function() { 
      $("header").slideUp('slow'); 
     }); 
    }); 

Answer 2

Попробуйте это. Его разработка

$(document).ready(function() { 
     $('#header').hide(); 
      $(".masterhead").mouseover(function() { 
       $("#header").slideDown('slow'); 
      }); 

     $('.masterhead').mouseout(function() { 
      $('#header').slideUp('slow'); 
     }); 


}); 

и вот образец HTML

<div class="masterhead">hello </div> 
<div id="header">hi</div> 

Вот jsfiddle * Demo *

Надеется, что это помогает. Спасибо.

Answer 3

Обновление

Я исправлю это, я нашел решение здесь. Я не знаю, подходит ли практика, но, похоже, работает так, как я надеялся. Я добавляю .stop (true, true) перед вызовом функции slideDown или slideup.

Решение

<script type="text/javascript"> 

      $(document).ready(function() { 
       $('header').hide(); 
       $(".masterhead").hover(
       function() { 
        $("header").stop(true,true).slideDown('slow'); 
       }, 
       function() { 
        $("header").stop(true,true).slideUp('slow'); 
       }); 
      }); 

     </script> 

Answer 4

более easilly использованием slideToggle:

$(document).ready(function() { 
       $('header').hide(); 
       $('.masterhead').hover(function(){ 
         $('header').slideToggle('slow'); 
       }); 

});