javascript - 实时更新内容/jquery 的动画高度

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) 设置了 200 像素的高度。然后我制作了一个点击功能(#expand)，它将 div 动画化为 500px 而不是 200px，这也很好用，但问题是，上面的功能每秒都在实时更新，所以当我点击时，并且它动画到 500 像素，1 秒后，它再次回到 200 像素，没有任何用户交互。

点击句柄:

$(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);

});