Question

我在这里有此页面：http://staging.morningsidepharm.com/news-blog/，其中以4行的形式显示博客文章列表。

我已将以下使用jQuery的动画应用于“卡片”，以便它们一张一张消失：

jQuery('.fade-in-post-container .elementor-post').hide();
jQuery('.fade-in-post-container .elementor-post').each(function(i) {
    setTimeout(()=>{jQuery(this).show().addClass('animated fadeInUp')}, 250 * i);
});

这很好用，尽管当卡片淡入并完成加载后，某些图像的顶部和底部会出现白色边框。

类似：

每次似乎都是不同的图像，但是如果我只是缩小浏览器窗口的大小，这会自动修复，即使很小，白色条也会消失...

我真的很为此苦苦挣扎，而且我不太确定如何找出问题所在，更不用说解决它了。我试图使用JSfiddle复制它，但是事实证明这很困难，因为有太多的样式和HTML在起作用。

如果有人可以帮助，将不胜感激！

感谢您的光临。

Answer 1

您只需要在img标签中添加这2行css，但是在为图像添加css时必须使用父类。

2018-10-02T06:47:43.191640+00:00 app[api]: Release v1 created by user kailauber@icloud.com
2018-10-02T06:47:43.308759+00:00 app[api]: Enable Logplex by user kailauber@icloud.com
2018-10-02T06:47:43.191640+00:00 app[api]: Initial release by user kailauber@icloud.com
2018-10-02T06:47:43.308759+00:00 app[api]: Release v2 created by user kailauber@icloud.com
2018-10-02T06:58:36.000000+00:00 app[api]: Build started by user kailauber@icloud.com
2018-10-02T06:58:37.000000+00:00 app[api]: Build failed -- check your build logs
2018-10-02T07:03:40.000000+00:00 app[api]: Build started by user kailauber@icloud.com
2018-10-02T07:03:42.000000+00:00 app[api]: Build failed -- check your build logs
2018-10-02T07:09:04.000000+00:00 app[api]: Build started by user kailauber@icloud.com
2018-10-02T07:09:54.741609+00:00 app[api]: Release v3 created by user kailauber@icloud.com
2018-10-02T07:09:54.741609+00:00 app[api]: Deploy 0c3d9616 by user kailauber@icloud.com
2018-10-02T07:09:59.000000+00:00 app[api]: Build succeeded
2018-10-02T07:16:48.138432+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/" host=trapnationbot.herokuapp.com request_                                                                                                                                                             id=6aced25b-f8c4-460e-8c1b-8f8794d40d2f fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=https
2018-10-02T07:16:48.457466+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/favicon.ico" host=trapnationbot.herokuapp.com request_id=dd99c34d-0bbc-46b8-b9c9-ee2418cf8cc4 fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=https
2018-10-02T07:16:48.493293+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/favicon.ico" host=trapnationbot.herokuapp.com request_id=47ec0871-d865-4ea4-93b1-d96e5782ccc2 fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=https
2018-10-02T07:18:52.707524+00:00 app[api]: Release v4 created by user kailauber@                                                                                                                                                             icloud.com
2018-10-02T07:18:52.707524+00:00 app[api]: Set token config vars by user kailauber@icloud.com
2018-10-02T07:19:58.616740+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/" host=trapnationbot.herokuapp.com request_id=f9116de7-d7f2-4354-b188-09624ed4c482 fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=https
2018-10-02T07:20:35.194420+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/" host=trapnationbot.herokuapp.com request_id=1ae1bc26-39a2-482a-87cc-12149d45a89d fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=http
2018-10-02T07:20:35.382931+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/favicon.ico" host=trapnationbot.herokuapp.com request_id=01d7c808-b8ca-4c82-a4b4-b0697541264f fwd="89.217.251.114" dyno= conect= service= status=503 bytes= protocol=http
2018-10-02T07:20:35.390361+00:00 heroku[router]: at=error code=H14 desc="No web processes running" method=GET path="/favicon.ico" host=trapnationbot.herokuapp.com request_id=3e2ed998-d89f-4961-b629-0dadcb00c89d fwd="89.217.251.114" dyno= connect= service= status=503 bytes= protocol=http

我希望这件事可行。

Answer 2

<a class="elementor-post__thumbnail__link" href="">
    <div class="elementor-post__thumbnail">
        <img src="">
    </div>
</a>

这是加载后缩略图元素的状态。您缺少elementor-fit-height div的elementor-post__thumbnail类，它具有height: 100%的{{1}}属性。您需要修复用于添加此类的JavaScript。

jQuery动画后的图像显示问题

2 个答案: