Question

我在包含图像的div框上设置新高度动画时出现此问题。我有一个从数据库中提取的实时更新内容功能。

function update_content() { 
var idval = getUrlVar("id");
$.getJSON("getdata.php", { id: idval }, function(data) {
    $("div#results").empty();
    $.each(data.json, function() {
        sum = this['sum'];
        $("div#results").append("<h2>"+this['title']+"</h2><div class='workimg' style='background:url(img/work/"+this['billede']+");background-position: center center;'></div><a id='expand'>klik</a>");
    });
});
        setTimeout(function(){
        update_content();
    }, 1000);
}

这很好用，我给了div（.workimg）200px的高度。然后我做了一个点击功能（#expand），它将div的动画设置为500px而不是200px，这也很好，但问题是，上面的函数每秒都是实时更新，所以当我点击时，它动画到500像素，1秒后，再次回到200px，没有任何用户交互。

点击句柄：

$(document).on('click', "#expand", function() {
            $(".workimg").animate({
        height: '500px'
    }, 1000);
});

此问题是否有解决方法？

祝你好运

Answer 1

你有没有写过在update_content（）里面给出200px高度的代码？我认为这是因为你在每1秒后递归调用update_content（）。现在，您可以像这样更改点击功能。

 $(document).on('click', "#expand", function() {
        $(".workimg").animate({
    height: '500px'
}, 1000);
 setTimeout(function(){ $(".workimg").css('height','500px !important'); },1100);

}）;

在实时更新内容/ jquery上设置动画高度

1 个答案: