JQuery slideDown Animationsverzögerung

Question

Meine JQuery-Folienanimation bleibt beim Verschieben der #res Div.

Irgendwelche Vorschläge?

JQuery:

$(document).ready(function(){ 

$('select.first').change(function(){ 

    $(this).prop('disabled', true); 
    var codata = $(this).val(); 
    var page = 1; 

    $.ajax({ 

     type:'POST', 
     url:'page.php', 
     dataType:'json', 
     data:{country:codata, page:page}, 
     success: function(data) { 

      var result=''; 
      $.each(data, function(i,e) { 
      result += "<div id='outer'>"+e.sDo+'</div>'; 
      }); 
      $('#res').html(result); 

     } 


    }).done(function(){$('#res').slideDown();}); 

}); 

}); 

CSS:

#res { 

    background-color:gainsboro; 
    border:1px solid gray; 
    width:100%; 
    display:none; 
    padding-top:10px; 
} 


#outer { 

    width:100px; 
    text-align:center; 
    border:1px dotted black; 
    margin:0 0 10px 10px; 
    display:inline-block; 
    height:40px; 

} 

Answer 1

Um slideDown ein Element ohne zu springen, muss das Element eine feste Breite haben. Hier ist eine Demo zu demonstrieren. http://jsfiddle.net/WtkUW/1/

Der Grund dafür ist, dass jQuery die Zielhöhe des Elements basierend auf seiner Breite und seinem Inhalt berechnet. Wenn die Breite 100% beträgt, kann jQuery die Höhe, die zu einem Sprung führt, nicht genau berechnen. Je größer der Inhalt, desto größer der Sprung.

Answer 2

Zunächst einmal, wie schnell Ihre page.php eine Antwort zu senden? Das könnte die Antwort sein.

Zweitens, Sie verwenden 2 konkurrierende Methoden, um Dinge zu erledigen, sobald der Ajax-Aufruf abgeschlossen ist: A) der Erfolgsparameter des .ajax() - Aufrufs und B) die neuere .done() - Funktion.

A. als von jQuery 1.8 veraltet werden (siehe: jQuery.ajax handling continue responses: "success:" vs ".done"?)

Warum (nicht alles in DONE) setzen:

$.ajax({ 
    type:'POST', 
    url:'page.php', 
    dataType:'json', 
    data:{country:codata, page:page}  
}) 
.done(function(data) { 

    var result=''; 
    $.each(data, function(i,e) { 
    result += "<div id='outer'>"+e.sDo+'</div>'; 
    }); 
    $('#res').html(result); 

    $('#res').slideDown(); 
}); 

Fest ohne zu sehen, die Hinrichtung zu wissen, aber diese Mischung könnte auch die Ursache für unerwartetes Verhalten sein.