Question

将同位素js应用于div部分后，库成功应用于div内的元素，一切正常。但是，以前的div动画无法正常工作。

这是在应用isotope js之前完美运作的小提琴：网址：https://jsfiddle.net/eugensunic/ttf1wkcn/2/

这是同位素得到应用时的小提琴，并且元素明显被一些隐藏的css覆盖：

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

以下是我使用的代码（两个小提琴相同）：

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

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

我知道我可以对此进行硬编码以获得上一个动画（小提琴编号1），但是有更简单的方法来解决这个问题，为什么使用同位素会使元素恶化这么多？

Answer 1

有两件事让你的小提琴感到不安：

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

我稍微更新了小提琴。 JSFiddle

应用同位素js会影响div的css

1 个答案: