问题:需要帮助反转功能;恢复 div 的动画扩展

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

这就是我正在做的事情:我有一个 Wordpress(因此是兼容模式)布局,它是一堆使用isotope排列的 div。当用户点击一个 div 时,它会使用 .animate() 扩展为特定大小,然后 isotope 按宽度对所有 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
});

解答

在 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 在布置所有项目之前需要知道项目的确切宽度。然后,您只需要使用 Isotope 的updateSortData方法更新 item 的 sortData,并触发.isotope()。