Question

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

[1] [2] [3]

4] [5] [6]

[7] [8] [9]

现在，让我说我用jquery .hide()删除其中一个他们都匆匆忙忙地取代离开的浮动div。特别是在改变行的情况下，如果3已经消失，[4]和[7]被提升到更高的行。

那么我该如何对这种变化应用某种动画效果呢？如果它可以直接在直线上动画，或者它在一个位置消失并在另一个位置消失，那将是很好的。

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

帮助！

谢谢::]

Answer 1

http://jsfiddle.net/Ha28t/

检查这个小提琴，我已经链接了你要求的效果。当某些div失踪时，我会对转换进行动画处理，这样div就不会“冲进去”而是“缓入”超过500ms。

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

希望这有帮助！

div浮动时的平滑过渡，jquery ui

1 个答案: