Question

我想根据用户搜索查询返回的内容创建一个增长和缩小（向上和向下滑动）的div元素。

我正在使用JQuery的animate属性，而且在大多数情况下，它都是有用的。当用户执行第一个查询时，我真的希望动画在同时淡入内容时执行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，以强制进行初始动画。”

Answer 1

如果您希望在容器向下滑动的同时淡化内容，可以使用一些选择性逻辑来处理处理内容不透明度的初始情况。

请注意，我在CSS中为#limit容器指定了0px的显式高度，以强制执行初始动画。

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

Answer 2

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>

Answer 3

使用slideDown(function()代替show(function()

根据更新的ajax内容扩展和缩小div

3 个答案: