jQuery SlideUp funktioniert nicht gut in Chrome

Question

Ich habe eine div, und folgende ist eine ul.

Ich wenden slideDown auf die div, und das schiebt die ul freundlich in allen Browsern.

Allerdings, wenn ich slideUp zum div, in allen broswers gelten die ul aufkommt schön nach die div beendet hat Schiebetüren, aber in Chrome, die ul kommt während die div oben gleitet, und dann sieht es für ein paar Sekunden chaotisch aus, bis die div verschwindet.

können Sie ein Beispiel sehen here:

Die slideDown und slideUp aktiviert werden, wenn Sie das Bild klicken:

Es macht dieses DIV erscheinen oder verschwinden:

Und das ist die ul, die nach unten und oben gehen soll, wenn das div erscheint bzw. verschwindet:

Und hier ist der Code. Der HTML-Code:

<div class="clearfix" id="whatWhere"> 
<ul> 
<!--what--> 
    <li id="what"> 
     <span>מה</span> 
     <div class="list"> 
      <ul class=""> 
       <li class="orange"><a href="http://dev.linux.ort.org.il/colleges?cat=7">אדריכלות ועיצוב פנים</a></li> 
       <li class="gray"><a href="http://dev.linux.ort.org.il/colleges?cat=14">אלקטרוניקה</a></li> 
       </ul>  
      <div class="toClose"> 
      <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png"> 
      </div> 
      </div><!--end list--> 
    </li> 
<!-- where --> 
    <li id="where"> 
      <span>איפה</span> 
      <div class="list"> 
      <ul class=""> 
       <li class="orange"><a href="http://dev.linux.ort.org.il/colleges/?p=21">מכללת אורט כפר סבא</a></li> 
       <li class="gray"><a href="http://dev.linux.ort.org.il/colleges/?p=19">מכללת אורט קרית ביאליק</a></li> 
      </ul> 

       <div class="toClose"> 
      <img width="37" height="18" src="http://dev.linux.ort.org.il/colleges/wp-content/themes/twentyeleven/images/close.png"> 
      </div> 
       </div><!--end list--> 
    </li> 
    </ul> 
</div> 

<ul id="links"> 
    <li id="hashlama"><a href="http://dev.linux.ort.org.il/colleges/?p=161">השלמה לתואר ראשון להנדסאים</a></li> 
    <li id="michlalot"><a href="http://dev.linux.ort.org.il/colleges/?p=165">מכללות אקדמיות להנדסה</a></li> 
</ul> 

Und das ist das JavaScript:

    $(document).ready(function() { 
        $("#whatWhere ul li span").click(function() { 
         //if another li open- closed; 
        if($(this).parent().siblings().children(".list").hasClass("highlight")){ 
         // $(this).parent().siblings().children("ul").slideUp("slow"); 
         $(this).parent().siblings().children(".list").css("display","none"); 
         $(this).parent().siblings().removeClass("open"); 
         $(this).parent().siblings().addClass("standBy"); 
         $(this).parent().siblings().children(".list").toggleClass("highlight"); 
        } 
        //open ul of selected li area 
        $(this).next().toggleClass("highlight"); 
        if($(this).next().hasClass("highlight")) 
         { 
         //#whatWhere 
          $(this).parent().parent().parent().addClass("open"); 
          //li 
          $(this).parent().addClass("open"); 
          $(this).next().slideDown("slow"); 
          $(this).parent().siblings().addClass("standBy"); 
          $(this).parent().removeClass("standBy"); 
         } 
        else 
         { 
         $(this).parent().parent().parent().removeClass("open"); 
         //li 
          $(this).parent().removeClass("open"); 
         $(this).next().slideUp("slow"); 
         // $(this).next().css("display","none"); 
         $(this).parent().siblings().removeClass("standBy"); 
         $(this).parent().removeClass("standBy"); 
         } 
        }); 

        $("#whatWhere ul li .list div.toClose").click(function() { 
         $(this).parent().parent().parent().parent().removeClass("open"); /*div #whatWhere*/ 
          $(this).parent().parent().removeClass("open"); /*li #what/#where*/ 
         $(this).parent().slideUp("slow"); 

         $(this).parent().parent().siblings().removeClass("standBy");/* the other li #what/#where*/ 
          $(this).parent().toggleClass("highlight"); /* div .list - maybe not needed*/ 
        }); 
       }); 

Answer 1

Fügen Sie "height: auto" zu Ihrem div mit der ID "whatWhere" dauerhaft hinzu und es sollte funktionieren.

Answer 2

This Kerl scheint gekommen zu sein es in Chrome läuft.

Answer 3

Sie sollten die Anzeige der ul in den Rückruf der zeigt die div.

$('#yourDiv').slideUp(normal, function() { 
    $('#yourUl').slideDown(); 
});