需要帮助扭转function; 恢复div的动画扩展
我是jQuery的新手，所以请原谅我，如果这是asinine。 如果是这样，请指出我可以获得一些知识的地方。
这就是我正在做的事情：我有一个Wordpress（因此兼容模式）布局，这是一组使用同位素排列的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 }); 在Isotope中动画项目大小有点像穿越流。 处理此问题的最佳方法是为项目中的内容设置动画，并仅更改项目容器的大小。
看看http://jsfiddle.net/desandro/DJVX2/
瓷砖有两个元素。 一个用于项目容器，一个用于项目的内容：
...
我正在使用轻微的同位素模式，总是对内容进行排序。 这是_init的一个小编辑。 对不起，我应该把它合并到master分支。
您正在寻找的代码一直在底部：
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(); }); });
单击一个图块时，它会切换大类，这会将.item-holder的大小切换为50×50或170×110。 然后它的内部元素.tile分别动画。 这是因为同位素在布置所有项目之前需要知道项目的确切宽度。 然后，您只需要使用Isotope的updateSortData方法更新项目的sortData，并触发.isotope() 。
看起来你的jQuery是正确的，你描述的问题与CSS有关。 尝试将overflow: hidden应用于你正在resize的div。
我很想使用一个标志来查看该图块是否打开，类似于我编写的这个例子 – http://jsfiddle.net/awavq/1/ 。
这应该会阻止它重新运行“开放”代码，就像你描述的那样。 因此，如果标志为true / open，则运行“反向”代码。
希望有道理，如果没有，请告诉我。