使用jQuery扩展div，而不会将div移动到它上面

我试图通过基本信息网格获得类似于http://www.nokiausa.com/us-en/products/的效果，其中点击可以扩展相邻项目的信息。

我遇到的一个问题是扩展我的div正在使邻近的div移动 – 我想我可能必须使用克隆function来生成一个绝对定位的孩子，但我不确定我将如何实际做到这一点。

    function growRight(){ $('#stuff1').animate({ backgroundColor: "#FF8600" }, 750 ); $('#stuff1').animate({ width: "510px" }, 750, function() {}); }   ul{ display:block; width:520px; background-color:#888888; } li{ position:relative; overflow:hidden; display:block; float:left; height:250px; width:250px; background-color:#B8B8B8; margin:5px; } p{ display:block; } div.contentright{ position:absolute; top:0px; left:250px; width:260px; height:250px; } .clearLeft{ clear:left; }    
 
 Stuff 1 
 This is a load of content. Content content content. 
 
 
 Stuff 2 
 
 Stuff 3 
 
 Stuff 4 
 
  

Answer 1

在我看来，这要求巧妙地使用position:absolute 。 z-index仅设置首先出现在彼此之上的元素的顺序。

Answer 2

这是你的意思吗？

请原谅我可怕的格式，我写得很快

http://jsfiddle.net/y3QBw/5/

 var li_original_height = $('#stuff1').css('z-index'); function growRight() { var $stuff = $('#stuff1'), li_left = $stuff.offset().left, li_top = $stuff.offset().top, li_stuff_width = $stuff.outerWidth(true) + 5, $sibling = $stuff.next(); $sibling.css('margin-left', li_stuff_width); $stuff .css({ 'z-index': 1000, background: '#588EC8', position: 'fixed', top: li_top, left: li_left, margin: 0 }) .animate({ width: "510px" }, 750, function() {}); } function hideRight() { var $stuff = $('#stuff1'), $sibling = $stuff.next(); $stuff.animate({ width: "250px" }, 750, function() { $stuff.css({ 'z-index': li_original_height, background: '#B8B8B8', position: 'relative', top: 'auto', left: 'auto', margin: 5 }); $sibling.css('margin-left', 5); }); } $('#stuff1 a').toggle( function () { growRight(); return false; }, function () { hideRight(); return false; } ); 

Answer 3

好吧，我设法找到了一个解决方案，它几乎遵循我在问题中提到的方法 – 克隆了单元格，而单元格又是动画。 CSS属性确保“expandinatorright”完全位于其父级之上（当然，使用z-index确保它呈现在其他所有内容之上）。

  function growRight(){ $('.stuff') .clone(false) .addClass('expandinatorright') .appendTo($('.stuff')); $('.expandinatorright').animate({ backgroundColor: "#FF8600" }, 750 ); $('.expandinatorright').animate({ width: "510px" }, 750, function() {}); } 

我希望这对任何可能遇到类似问题的人都有用。

Answer 4

快速尝试一下，我建议在动画制作之前，将z-index属性添加到您想要放大的元素中。 这应该使它高于相邻元素并隐藏它而不是将其向下推。

就像是：

 function growRight(){ $("#stuff1").css("z-index","5"); $('#stuff1').animate({ backgroundColor: "#FF8600" }, 750 ); $('#stuff1').animate({ width: "510px" }, 750, function() {}); }