0

我正在做一个砖石风格的页面，其中的框在单击时会展开。我已经制作了 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;
  });

});

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

//一个。

4

1 回答 1

1

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

于 2011-09-16T13:59:54.653 回答