展开和收缩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的更新内容

回答

相关问题