jQuery Hide/Show mit Folie auf zu Schweben... besseren Weg, dies zu tun?

Grundsätzlich einige Probleme mit der Verwendung von Hover anzeigen oder ausblenden eines Elements.

Die Idee ist einfach, auf hover-show a div. Wenn Sie nicht mehr schweben, Sie auszublenden. Problem ist, wenn der Mauszeiger über dem div und Blätter zu schnell, das anzeigen/ausblenden von div-Element sichtbar bleibt. Ich hoffe, dies ist etwas, was leicht zu beheben ist und nicht ein typisches problem mit dem hover-Ereignis.

 jQuery
 (
   function() 
   {
     jQuery(".slideDiv").hide();

     jQuery(".mainDiv").hover
     (
       function() 
       {
         var children = jQuery(this).children(".slideDiv");

         if (children.is(":hidden")) 
         {
           children.show("slide", { direction: "left" }, 100);
         }
       },
       function() 
       {
          var children = jQuery(this).children(".slideDiv");
          children.hide("slide", { direction: "left" }, 100);
       }
     );
   }
 );

Stile Aussehen:

 .mainDiv
 {
   margin:5px;
   height:200px;
 }

 .slideDiv
 {
   background-color:Teal;
   float:left;
   height:200px;
   position:absolute;
   z-index:100;
 }

- Und markup

    <div class="mainDiv">
        <div class="showDiv">
            Hover me
        </div>
        <div class="slideDiv">
            Do you see me?
        </div>
    </div>
    <div class="clear"></div>
    <div class="mainDiv">
        <div class="showDiv">
            Hover me too
        </div>
        <div class="slideDiv">
            Do you see me now?
        </div>
    </div>

InformationsquelleAutor Programmin Tool | 2009-07-09

Schreibe einen Kommentar