jQuery Slider question

Question

J'essaie de faire quelque chose que je ne sais pas comment faire, mais je sais peut être fait. Il y a 2 divs, ils développent tous les deux la largeur de la fenêtre du navigateur, ils ont 450px de hauteur. Donc, fondamentalement, 1 bloc au-dessus de l'autre. Je veux mettre un div entre ces deux, qui se révèle à partir de planer quelque chose dans le haut Div (bouton ou autre). L'élément hover sera au bas de la div supérieure. Mais j'ai besoin de la div du milieu pour rester active pendant que son contenu est survolé ... au-dessus.

À quoi ressemblerait la jquery? C'est ce que j'ai jusqu'ici.

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#toggleh1").hover(function() { 
       $(".header2").slideDown(400); 

      }, function() { 
       $(".header2").slideUp(400); 
      }); 
     }); 
    </script> 

Merci

Answer 1

Votre meilleur pari peut être d'utiliser un délai d'attente au lieu d'un .hover()

$(document).ready(function() { 
    var t; // This will be a timeout 
    $('#toggleh1').mouseover(function() { 
     if (t) 
     { 
      clearTimeout(t); 
     } 

     $('.header2').slideDown(400); 
    }).mouseout(function() { 
     t = setTimeout(function() { 
      $('.header2').slideUp(400); 
     }, 500); // .5 second delay before hiding 
    }); 

    $('.header2').mouseover(function() { 
     if (t) 
     { 
      clearTimeout(t); 
     } 
    }).mouseout(function() { 
     t = setTimeout(function() { 
      $('.header2').slideUp(400); 
     }, 500); // .5 second delay before hiding 
    }); 
}); 

Pour expliquer plus loin, lorsque vous mouseover l'élément déclencheur, la div est représenté . Lorsque votre souris quitte l'élément déclencheur, le navigateur démarre un compte à rebours de 0,5 seconde. Si elle atteint la fin de ce compte à rebours, la div sera cachée. Si, avant la fin du compte à rebours, vous passez la souris sur le déclencheur OU le div lui-même, le compte à rebours sera arrêté. Si votre souris quitte le div, le compte à rebours recommencera.

S'il vous plaît noter que vous pouvez jouer avec .mouseover() par rapport à .mouseenter() et .mouseout() par rapport à .mouseleave()