同位素和jQuery UI发生冲突 [英] Isotope and jquery UI colliding

问题描述

我正在做一个砌体样式的页面，其中的框在单击时会展开. 我已经编写了javascript代码，以便在单击另一个框时，所有其他框将默认使用其原始大小.也就是说:一次只能展开一个框.

I am doing a masonry-style page with boxes that expand when clicked. I have made the javascript code so that all other boxes will default to their original size when another box is clicked; that is: only one box will be expanded at a time.

一切正常！

问题是，同位素并没有为调整框的大小设置动画，而是为重新定位设置了动画！

The thing is that isotope doesn't animate the resizing of boxes, only the repositioning!

因此，我已经调用了jQuery UI插件来动画化切换类功能，以便不仅可以对元素的重新定位进行动画处理，而且还可以对元素本身进行扩展.

So I've invoked the jquery UI plugin to animate that toggle class function, so that not only the repositioning of elements will be animated, but also the very expanding of the element itself.

可惜，jquery UI和同位素中的某些东西并不能很好地融合在一起，这意味着元素的重新定位会以某种方式弄乱.

BUT alas, something in jquery UI and isotope doesn't quite fit together, meaning that the repositioning of elements somehow messes up.

示例的javascript代码是这样的:

The javascript code for the examples is this:

第一个可行的方法:

    $(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;
  });

});

然后是一个无效的(请注意，毫秒是两个示例之间的唯一区别):

Then the one that doesn't work (notice that the milliseconds is the only difference between the two examples):

    $(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;
  });

});

有人知道问题是什么，或如何解决?谢谢大家.

Does anyone know what the problem is, or how to solve it? Thank you all very much in advance.

//A.

推荐答案

请参见同位素-动画项目大小.它会播放4分钟的视频，介绍您遇到的问题.

See Isotope - Animating item sizes. It features a 4 minute video on the problem you're running into.

这篇关于同位素和jQuery UI发生冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！