使用jQuery进行div展开而不移动divs

我试图获得类似于您可以在http://www.nokiausa.com/us-en/products/中找到的效果，其中包含基本信息网格，其中点击展开了邻近项目的信息。使用jQuery进行div展开而不移动divs

我遇到的一个问题是扩展我的div使邻居div移动 - 我想我可能不得不使用克隆函数来产生一个绝对定位的孩子，但我不知道我该怎么做那。

<head> 
<script src="jquery-1.7.min.js"></script> 
<script src="jquery.color.min.js"></script> 
<script type="text/javascript"> 
    function growRight(){ 
     $('#stuff1').animate({ 
      backgroundColor: "#FF8600" 
     }, 750); 
     $('#stuff1').animate({ 
      width: "510px" 
     }, 750, function() {}); 
    } 

</script> 
<style> 
    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; 
    } 
</style> 
</head> 
<body> 
<ul id="gridbox"> 
    <li class="stuff" id="stuff1"> 
     <a href="javascript:growRight()">Stuff 1</a> 
     <div class="contentright"> 
      This is a load of content. Content content content. 
     </div> 
    </li> 
    <li> 
     Stuff 2 
    </li> 
    <li> 
     Stuff 3 
    </li> 
    <li> 
     Stuff 4 
    </li> 
</ul> 
</body>

来源

2011-11-21 Hal Clive

写我想创建一个的jsfiddle所以它更容易看到你的问题。你可以有css或js我们看不到，所以如果你可以在jsfiddle上复制它，那么我们可以有一个沙盒问题来解决。 – BentOnCoding

不是很有帮助，但他们的所有代码都可以看到他们是如何做到的。 ;-)例如，4的每一行实际上被细分为2（以适应扩展div需要去的方向）。据我从快速检查可以看出，他们正在使用浮游物。 –

@Robotsushi，这是我现在拥有的所有代码 - 未列出的唯一代码是jQuery库和允许彩色动画的颜色插件。我只是把它复制到一个小提琴在这里：http://jsfiddle.net/zUbTQ/ –

好吧，我设法找到一个解决方案，几乎遵循我在问题中提到的方法 - 这克隆了细胞，反过来动画。 CSS属性确保“expandinatorright”绝对位于父级之上（当然，使用z-index确保它被渲染到最重要的位置）。

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

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

来源

2011-11-22 08:31:33

只是走一个快速刺在此，我建议之前的动画，一个z-index属性添加到您想要放大的元素。这应该让它走到邻居元素之上并且隐藏它而不是将它推下。

喜欢的东西：


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

来源

2011-11-21 22:51:38

我希望这是简单的，但正如其他人说，我不认为z-索引是这样的。即使这样做，它仍然会让布局变得困难，让div滑回去...... –

在我看来，这需要的position:absolute一些巧妙的用法。 z-index只设置首先出现在彼此顶部的元素的顺序。

来源

2011-11-21 22:58:59 egasimus

我在想这个，但是这可能需要div被jQuery克隆，然后给这个克隆绝对位置。我真的不知道我会如何做到这一点。 –

'element.clone（）。appendTo（target）'应该让你开始（： – egasimus

）谢谢你，我现在已经得到你的帮助，我会将解决方案作为一个单独的答案发布。 –

这是你的意思？

请原谅可怕的格式，我赶紧

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

来源

2014-02-11 16:53:29 Jaykizi

使用jQuery进行div展开而不移动divs

回答

相关问题