javascript - JQuery animate 总是删除显示 :none and adds display:block to inline css

Question

我正在运行一些简单的 jquery 来对一组图像进行动画处理。有些图像是隐藏的，有些则不是。但看起来 jquery 只是让它们全部可见，我想通过改变它们的显示方式来为它们设置动画。

$('.productImageLarge').animate({
    width: 185,
    height: 185
});  

JQuery 自动使它们全部显示: block 。

是否可以在不改变显示可见性的情况下制作动画。

谢谢

Answer 1

如果您设置指定显示属性并添加!重要声明，jQuery 将在完成动画后恢复显示属性。例如，如果您在 jQuery 主页上运行此命令，它会将第一本书图像设置为 display:inline，对其进行动画处理，然后验证生成的 HTML 是否具有正确的显示属性。

$($(".jq-bookImg").get(0))
    .css("display","inline !important")
    .animate({ width: 85, height: 185 }, function(){
        console.log("display propery is " + $(this).css("display"));
    }
);