展開和收縮DIV基於AJAX的更新內容

我想創建一個基於從用戶的搜索查詢返回的內容的增長和收縮（上下滑動）div元素。展開和收縮DIV基於AJAX的更新內容

我使用jQuery的動畫財產，在大多數情況下，它的功能。當用戶執行第一個查詢時，我真的很喜歡動畫執行slideDown影響，同時淡化內容。如果執行額外的搜索查詢，div將根據從服務器返回的內容而增長（或縮小）。

眼下，在不需要的第一個搜索結果從左向右滑動般的效果。後續查詢正確地展開div。

爲了說明這個問題，請參閱的jsfiddle：http://jsfiddle.net/krpXk/

HTML：

<input type="text" id="search-term" /> 
<input type="button" id="submit-button" value="submit" /> 

<div id="limit"> 
    <div id="results"></div> 
</div>

的Javascript：

$('#submit-button').click(function(e) { 

    // ajax request 
    $.ajax({ 
     async: true, 
     cache: false, 
     type: 'post', 
     url: '/echo/html/', 
     data: { 
      html: '<p class="p-content">Search term: ' + $('#search-term').val() + '</p>' 
     }, 
     dataType: 'html', 
     success: function(data) { 
      $('#results').append(data).show(function(){ 
       $('#limit').animate({ 
        height:$("#results").height() 
       },500); 
      }); 
     } 
    }); 
});

CSS：

#results { 
    background:#dfdfdf; 
    display:none; 
    width:300px; 
} 

#limit { 
    position: relative; 
    overflow: hidden; 
    width:100%; 
} 

.p-content { 
    margin:0 auto; 
    width:100px; 
}

更新：

我發現，答案是非常簡單的。只要將#limit高度設置爲0，就會強制下滑動畫。

從答案：「請注意，爲了強制執行初始動畫，我在CSS中給了#limit容器顯式高度0px。」

來源

2013-02-26 arcdegree

如果你想在同一時間的容器滑落將褪色的內容，你可以把一些選擇性的邏輯來處理，處理內容的不透明度的初始情況。

請注意，我給了#limit容器明確的高度0px在CSS中，以強制初始動畫。

var wasOriginallyEmpty = $('#results').is(':empty'); 

$('#results').append(data); 

if (wasOriginallyEmpty) { 
    $('#results').contents().css('opacity', 0); 
} 

$('#limit').animate({ 
    height: $('#results').height() 
}, 500); 

if (wasOriginallyEmpty) { 
    $('#results').contents().animate({ 
     'opacity': 1 
    }, 1000); 
}

jsfiddle

來源

2013-02-26 07:39:33

使用slideDown(function()，而不是show(function()

來源

2013-02-26 07:23:58 Rajiv007

DEMO

可以animate的height高達scrollHeight。

JS：

$('#submit-button').click(function(e) { 

    // ajax request 
    $.ajax({ 
     async: true, 
     cache: false, 
     type: 'post', 
     url: '/echo/html/', 
     data: { 
      html: '<p class="p-content">Search term: ' + $('#search-term').val() + '</p>' 
     }, 
     dataType: 'html', 
     success: function(data) { 
      var $limit = $('#limit').append(data); 
      $limit.animate({'height': $limit[0].scrollHeight},500); 
     } 
    }); 
});

CSS：

#limit { 
    position: relative; 
    width:100%; 
    background:#dfdfdf;  
    overflow: hidden; 
    height: 0; 
} 

.p-content { 
    margin:0 auto; 
    width:100px; 
}

HTML：

<input type="text" id="search-term" /> 
<input type="button" id="submit-button" value="submit" /> 

<div id="limit"> 
</div>

來源

2013-02-26 08:12:07 Jashwant

展開和收縮DIV基於AJAX的更新內容

回答

相關問題