jquery - 应用同位素js影响div的css

Question

将同位素js应用到div部分后，库成功应用到div内部的元素，一切正常。但是，之前有效的 div 动画不再按预期工作。

这是在应用同位素 js 之前完美运行的 fiddle :网址:https://jsfiddle.net/eugensunic/ttf1wkcn/2/

这是应用同位素时的 fiddle ，元素显然被一些隐藏的 css 覆盖:

网址 https://jsfiddle.net/eugensunic/so1axnup/10/

这是我正在使用的代码(两个 fiddle 都一样):

$(this).animate({                            
        position: "relative",
        left: "200px",
        top: "200px",
        zIndex: "55"

    }, 1200, function () {
        $(this).animate({                                
            position: "relative",
            left: "0px",
            top: "0px",
            zIndex: "55"
        });
    });

我知道我可以对此进行硬编码以获取上一个动画 (fiddle num.1)，但是有没有更简单的方法来解决这个问题，为什么应用同位素后元素会退化这么多？

Answer 1

有两件事打扰了你的 fiddle :

1. isotope.js 是通过 HTTP 而不是 HTTPS 加载的。由于这个效果不起作用。尝试对 HTTPS 和动画将开始工作。
2. 动画结束后，将所有元素设置为 left:0;顶部:0；position:absolute；z-index:55px。因此，所有的 div 都相互堆叠。尝试使用 position:relative !important 强制相对位置，使它们并排放置。我还建议保留 X * Y单击 div 的坐标，然后将它们作为参数传递到您的代码中。

我已经为它稍微更新了 fiddle 。 JSFiddle