Wie dynamisch erzeugte Elemente mit slideDown() angezeigt werden?

Question

Ich verwende den folgenden Code, um den Inhalt von .elements zu ändern, wenn #select-element Wert geändert wird:

$("#select-element").on('change', function() { 
    var dtype = $("#select-element").val(); 

    $.ajax({ 
    type: 'GET', 
    url: '/?type='+dtype, 
    dataType: 'json', 
    success: function(result) { 
     for (var r in result) { 
     var row = ' \ 
      <div class="row">result[r].name \ 
      </div> \ 
     '; 
     $('.elements').prepend(row); 
     } 
    }, 
    error: function (jqXHR, textStatus) { 
    }, 
    beforeSend: function(){ 
     $(".elements").slideUp(function() { 
     $(".elements").children().remove(); 
     }); 
    }, 
    complete: function(){ 
     $(".elements").slideDown(); 
    } 
    }); 
}); 

Es funktioniert gut, wenn ich slideUp() Funktionen entfernen. Aber wenn es dort ist, dann wird neuer Inhalt nicht angezeigt. Sieht aus wie das Problem ist mit slideDown() Funktion, die nicht dynamisch generierte Element angezeigt werden soll.

Wie kann ich es beheben?

Answer 1

Das Problem ist, dass die Dauer slideUp() standardmäßig 400ms beträgt. Dann, nachdem 400ms verstrichen sind, entfernst du die Kinder.

Angenommen, der Ajax ist in 200ms erledigt (weniger Zeit als die Animationsdauer) ... wird der neue Inhalt zum Zeitpunkt des Aufrufs des children().remove() bereits eingefügt.

Ich schlage vor, Sie entfernen die beforeSend und complete und kombinieren alles in die slideUp Rückruf innerhalb success Handler.

$.ajax({ 
    type: 'GET', 
    url: '/?type=' + dtype, 
    dataType: 'json', 
    success: function(result) { 
    var $elems = $(".elements"); 
    // do slideUp 
    $elems.slideUp(function() { 
     // now change content 
     $elems.empty(); 

     for (var r in result) { 
     var row = ' \ 
      <div class="row">result[r].name \ 
      </div> \ 
     '; 
     $elems.prepend(row); 
     } 
     // and display new content 
     $elems.slideDown(); 
    }); 
    }, 
    error: function(jqXHR, textStatus) {} 
}); 

Eine Alternative wäre Versprechen von jQuery Animationen wieder verwenden