同位素和 jquery UI 碰撞

Question

我正在做一个砖石风格的页面，其中的框在单击时会展开。 我已经编写了 javascript 代码，以便当单击另一个框时，所有其他框将默认为其原始大小；也就是说：一次只会扩展一个盒子。

效果很好！

问题是同位素不会调整盒子的大小，只会调整位置！

因此，我调用了 jquery UI 插件来为切换类函数设置动画，这样不仅元素的重新定位将被动画化，而且元素本身的扩展也会被动画化。

但可惜的是，jquery UI 和 isotope 中的某些东西不太适合在一起，这意味着元素的重新定位在某种程度上会混乱。

这些示例的 javascript 代码是这样的：

首先是有效的：

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize');
    $(this).toggleClass('maxsize');
    $container.isotope('reLayout');
    return false;
  });

});

然后是无效的（请注意，毫秒是两个示例之间的唯一区别）：

    $(document).ready(function() {

    var $container = $('#masonrycontainer');

    $($container).isotope({
            masonry : {
            columnWidth : 100
        }
    });

    // change size of clicked element
    $container.delegate( '.isotopeelement', 'click', function(){
    $('.isotopeelement').not(this).removeClass('maxsize', 300);
    $(this).toggleClass('maxsize', 300);
    $container.isotope('reLayout');
    return false;
  });

});

有谁知道问题是什么，或者如何解决它？预先非常感谢大家。

//一个。

Answer 1

请参阅同位素 - 动画项目大小。它包含一个 4 分钟的视频，介绍您遇到的问题。