Question

我正在做一个砖石风格的页面，其中包含单击时展开的框。我已经制作了javascript代码，以便在点击另一个框时所有其他框将默认为其原始大小;也就是说：一次只能扩展一个框。

一切正常！

事情是，同位素不会对盒子的大小调整进行动画处理，只会重新定位！

所以我调用了jquery UI插件来设置切换类函数的动画，这样不仅可以动画重新定位元素，还可以扩展元素本身。

但是，jquery UI和同位素中的某些东西并不完全吻合，这意味着元素的重新定位会以某种方式混乱。

示例的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

见Isotope - Animating item sizes。它包含一个关于您遇到的问题的4分钟视频。

同位素和jquery UI碰撞

1 个答案: