使用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

回答

相關問題