jQuery 同位素砌体布局动画失败:(

发布于 2024-11-14 16:24:37 字数 782 浏览 3 评论 0原文

我正在尝试让 jQuery Isotope's 砌体布局在此测试站点上工作:http://make.truliablog.com/test-filters

它似乎对它们进行了正确的排序,但是调整窗口大小和块调整时的动画不起作用。我该如何解决这个问题?

这是相关的 jQuery 代码。

<script>
    jQuery(document).ready(function(){
        jQuery('#container').isotope({
            masonry : {
                columnWidth : 50
            }
        });

        // Filter buttons
        jQuery('#filters a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#container').isotope({ filter: selector });
            return false;
        });
    });
</script>

I am trying to get jQuery Isotope's masonry layout to work on this test site: http://make.truliablog.com/test-filters

It appears to be sorting them properly, but the animation when you resize the window and the blocks adjust are not working. How can I fix this problem?

Here is the associated jQuery code.

<script>
    jQuery(document).ready(function(){
        jQuery('#container').isotope({
            masonry : {
                columnWidth : 50
            }
        });

        // Filter buttons
        jQuery('#filters a').click(function(){
            var selector = jQuery(this).attr('data-filter');
            jQuery('#container').isotope({ filter: selector });
            return false;
        });
    });
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

剩余の解释 2024-11-21 16:24:37

看来 Isotope 将默认的“animationEngine”设置为“css”。
最短的方法是将“animationEngine”设置为“jquery”(假设您使用的是 jQuery)。

jQuery('#filters a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuery('#container').isotope({
        filter: selector,
        animationEngine : "jquery"
    });
    return false;
});

It seems Isotope has the default 'animationEngine' as 'css'.
The shortest way would be to set 'animationEngine' as 'jquery' (assuming you are using jQuery).

jQuery('#filters a').click(function(){
    var selector = jQuery(this).attr('data-filter');
    jQuery('#container').isotope({
        filter: selector,
        animationEngine : "jquery"
    });
    return false;
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文