jquery - 需要帮助反转函数；恢复 div 的动画扩展

Question

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

这就是我正在做的事情:我有一个 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

在同位素中对项目大小进行动画处理有点像穿越溪流。处理此问题的最佳方法是对项目中的内容进行动画处理，并且仅更改项目容器的大小。

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

图 block 有两个元素。一项用于项目容器，一项用于项目的内容:

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

我正在使用 Isotope 的一个小模块，它总是对内容进行排序。这是 _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();

  });

});

单击某个图 block 时，它会切换 big 类，这会将 .item-holder 的大小切换为 50x50 或 170x110。然后其内部元素 .tile 单独进行动画处理。这是因为 Isotope 在布置所有项目之前需要知道项目的确切宽度。然后，您只需使用 Isotope 的 updateSortData method 更新项目的 sortData。 ，并触发 .isotope()。