Problème de script Jquery

Question

Je suis assez nouveau avec jQuery.
Essayez d'écrire un script simple pour le faire glisser et le faire glisser vers le bas.

<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> 

Le problème est quand je suis en train de le voir dans le navigateur, il garde glisser vers le haut et vers le bas pas le beahvior correct j'espérais, j'ai essayé avec slideToggle mais la même chose se produit. J'ai essayé beaucoup de solutions de ce site mais la même chose.
J'apprécierai n'importe quelle aide avec ceci.

Answer 1

vérifier cela, mais assurez-vous que vous ne voulez pas utiliser $('#header') ou $('.header') au lieu de $('header'):

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

Answer 2

essayer. Son travail

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

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


}); 

et voici l'exemple html

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

Voici le jsFiddle * Demo *

Hope this helps. Je vous remercie.

Answer 3

Mise à jour

Je le fixe, j'ai trouvé une solution ici. Je ne sais pas si la meilleure pratique mais semble fonctionner comme j'espérais. J'ajoute .stop (true, true) avant d'appeler la fonction slideDown ou slideup.

Solution

<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

plus easilly utilisant slideToggle:

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

});