0

我想创建一个 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 的显式高度，以强制执行初始动画。”

4

3 回答 3

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

于 2013-02-26T07:39:33.150 回答
1

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-26T08:12:07.537 回答
0

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

于 2013-02-26T07:23:58.210 回答