Question

我是jQuery的新手，所以请原谅我，如果这是asinine。如果是这样，请指出我可以获得一些知识的地方。

这就是我正在做的事情：我有一个Wordpress（因此兼容模式）布局，它是使用isotope排列的一堆div。当用户点击div时，它会使用.animate（）扩展到一定大小，然后同位素按宽度对所有div进行排序。

这一切都很漂亮，我很高兴。问题是我已经全力以赴，没有逆转。我想添加一个按钮，将div恢复为原始状态（宽度：156px高度：191px）。这是我的绿色状态真正显示的地方。当我点击一个关闭的链接时，我已经尝试过对我已经完成的所有操作进行逆向工程，但我所能实现的只是缩小了div，只是让它立即回到扩展的大小。

如果有人可以指出我正确的方向，我将永远负债累累。另外，如果我可以向您提供任何更多信息，请告诉我，我会正确的。非常感谢你。

jQuery().ready(function() {

    // Variables - Project Tiles
    var $tile = jQuery(".tile");

    //Expands tile on click
    jQuery($tile).click(function(){
        $tile
            .stop()
            jQuery(this).addClass('expanded'); //change cell's class
            jQuery(".tile-content", this).hide(); //hide starting content
            jQuery(this).animate({ //animate the expansion of the cell
                width: '933px',
                height: 'auto',
            }, "slow", function() { //things to do after animation
                jQuery(".expanded-content", this).fadeIn('slow'); //show post content
                jQuery("#content").isotope({  //re-arrange tiles
                    sortBy : 'width',
            });
        });
    }); 
    //  close tile
});

Answer 1

在Isotope中制作项目大小有点像穿越溪流。处理此问题的最佳方法是为项目中的内容添加动画，并仅更改项目容器的大小。

查看http://jsfiddle.net/desandro/DJVX2/

瓷砖有两个元素。一个用于项目容器，一个用于项目的内容：

<div id="container">
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  <div class="tile-holder">
    <div class="tile"></div>
  </div>
  ...
</div>

我正在使用轻微的同位素模式，总是对内容进行排序。这是_init内的一个小编辑。对不起，我应该把它合并到主分支。

您正在寻找的代码一直在底部：

jQuery(function(){

  var $container = jQuery('#container'),
      $tileHolders = jQuery('.tile-holder');

  $container.isotope({
    itemSelector: '.tile-holder',
    masonry: {
      columnWidth: 60
    },
    getSortData : {
      width : function( $item ){
        // sort by biggest width first, then by original order
        return -$item.width() + $item.index();
      }
    },
    sortBy : 'width'
  })

  $tileHolders.click(function(){
    var $this = jQuery(this),
        tileStyle = $this.hasClass('big') ? { width: 50, height: 50} : 
          { width: 170, height: 110};
    $this.toggleClass('big');

    $this.find('.tile').stop().animate( tileStyle );
    // update sortData for new tile's width
    $container.isotope( 'updateSortData', $this ).isotope();

  });

});

点击图块后，它会切换big类，这会将.item-holder的大小切换为50x50或170x110。然后它的内部元素.tile分别动画。这是因为同位素在布置所有项目之前需要知道项目的确切宽度。然后，您只需使用Isotope的updateSortData method更新项目的sortData，然后触发.isotope()。

Answer 2

看起来你的jQuery是正确的，你描述的问题与CSS有关。尝试将overflow: hidden应用于您正在调整大小的div。

Answer 3

我很想使用一个标志来查看该图块是否打开，类似于我编码的示例 - http://jsfiddle.net/awavq/1/。

这应该会阻止它重新运行“开放”代码，就像你描述的那样。因此，如果标志为真/开，请运行“反向”代码。

希望有意义，如果没有，请告诉我。

需要帮助扭转功能;恢复div的动画扩展

3 个答案: