0

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

[1] [2] [3]

4] [5] [6]

[7] [8] [9]

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

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

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

帮助！

谢谢 ：：]

4

1 回答 1

0

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 });
});

希望这可以帮助！

于 2013-08-25T17:07:13.270 回答