div float移动时平滑过渡，jquery ui答案

【问题标题】：smooth transition when div float moves, jquery uidiv float移动时平滑过渡，jquery ui
【发布时间】：2013-08-09 06:07:57
【问题描述】：

假设我有一个由重复的display: inline div 引起的 div 网格并将其设置为float: left 对吗？

[1] [2] [3]

4] [5] [6]

[7] [8] [9]

现在，假设我用 jquery .hide() 删除其中一个他们都跑过去代替离开的浮动div。尤其是在更改行的情况下，例如如果 3 消失了，并且 [4] 和 [7] 被提升到更高的行。

那么我该如何对这种变化应用某种动画效果呢？如果它可以在一条直线上为它们设置动画，或者如果它在一个位置淡出并在另一个位置淡入，那就太好了。

PS 我的实际应用程序不会删除 div，它会将它们调整为更高，从而将 div 移动到右侧和下方。

帮助！

谢谢::]

【问题讨论】：

您还在寻找答案吗？因为我有一个:)

标签： jquery-ui html jquery-animate

【解决方案1】：

http://jsfiddle.net/Ha28t/

检查这个小提琴，我在其中链接了您要求的效果。当某些 div 丢失时，我会为过渡设置动画，以便 div 在 500 毫秒内不只是“冲入”而是“缓入”。

jQuery('#header ul li:nth-child(2)').click(function(event){
  event.preventDefault();   
  jQuery('div.piece').css("border","solid 1px black");
  jQuery('div.piece:not(.photo)').css("border","none");
  jQuery('div.piece:not(.photo)').animate({ width: -2 }, 
    { duration: 500, queue: false });
  jQuery('div.photo').animate({ width: 98 }, 
    { duration: 500, queue: false });
});

希望这会有所帮助！

【讨论】：