JQuery स्लाइडडाउन एनीमेशन अंतराल

Question

#res div स्लाइड करते समय मेरी JQuery स्लाइड एनीमेशन झटके।

कोई सुझाव?

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();}); 

}); 

}); 

सीएसएस:

#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

स्लाइड करने के लिए इसे बिना किसी तत्व के स्लाइड करें, तत्व में निश्चित चौड़ाई होनी चाहिए। प्रदर्शन करने के लिए एक डेमो यहाँ है। http://jsfiddle.net/WtkUW/1/

इसका कारण jQuery की चौड़ाई और इसकी सामग्री के आधार पर तत्व की लक्ष्य ऊंचाई की गणना करता है। यदि इसकी चौड़ाई 100% है, तो jQuery जंप में सटीक रूप से ऊंचाई की गणना नहीं कर सकता है। सामग्री जितनी बड़ी होगी, कूद उतनी ही बड़ी होगी।

Answer 2

सबसे पहले, कितनी तेजी से अपने page.php एक प्रतिक्रिया भेज रहा है? यह पूरी तरह से जवाब हो सकता है।

दूसरा, आप AJAX कॉल पूर्ण होने के बाद सामान प्राप्त करने के लिए 2 प्रतिस्पर्धी तरीकों का उपयोग कर रहे हैं: ए) .ajax() कॉल, और बी का सफलता पैरामीटर नया .done() फ़ंक्शन।

ए jQuery 1.8 के रूप में बहिष्कृत कर दिया जाएगा (देखें: jQuery.ajax handling continue responses: "success:" vs ".done"?)

क्यों नहीं .done में सब कुछ डाल दिया():

$.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(); 
}); 

निष्पादन देखे बिना पता करने के लिए मुश्किल है, लेकिन इन मिश्रण अप्रत्याशित व्यवहार का स्रोत भी हो सकता है।