當使用jquery動畫擴展側欄時autoresize div

-1

即時通訊試圖實現本網站使用的效果http://www.qvivo.com/。 jquery工作正常，現在我的問題是如何在左側面板/側邊欄擴展時自動調整主內容的大小。請幫助傢伙。先謝謝你。當使用jquery動畫擴展側欄時autoresize div

來源

2012-09-19 ytse_jam

在我的情況下，我只會使用％和display：none。並製作一個好的HTML骨架。由於沒有代碼，我不能告訴更多。 –

右側響應，左側固定。研究響應式設計。 – JKirchartz

這裏是代碼http://jsfiddle.net/ytsejam/hqNee/1/ –

來自QVIVO的Liam在這裏。我寫了一個快速jsFiddle（http://jsfiddle.net/fZy6z/）來模仿網站的框架。

我的主要建議是儘量讓瀏覽器爲你做大部分工作。我們只是使用CSS轉換添加和刪除類標籤，而不是使用JQuery爲DOM生成動畫。開始時您不會看到好處，但是當您開始用複雜的DOM樹填充右側面板時，您會發現順利進行動畫處理的唯一方法是通過硬件加速轉換。

關於自動調整主要內容的問題，它非常簡單 - 從不聲明包含div的寬度值，因爲它們會自動伸展到頁面的寬度。這些div內的內容可以被賦予100％的寬度值。

乾杯，利亞姆

來源

2012-09-20 02:00:28

這真棒，非常感謝。 –

沒問題，隨時都可以。 –

我不是最好的使用jQuery，所以我用JavaScript混了一點點。

你將需要玩你想要和看的寬度％。

從你的CSS，首先我把類pannel_button我把它Absoute。此外，我除去浮左

.panel_button{ 
    height: 50px; 
    width: 50px; 
    cursor: pointer; 
    background-image: url(images/arrow.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: thin solid #CCC; 
    margin-left: -1px; 
    top: 200px; 
    position:absolute; 
}

然後爲您的Jquery ANDS我的一些JavaScript代碼，正如我在JS是更好的，我做了動畫這種方式

var content = document.getElementsByClassName("content"); 
$('.panel_button').click(function() 
{ 
    $(".panel").animate({width:'toggle'},500); 

    if(content[0].style.width=="70%"){ 
     $(".content").animate({width:"90%"},500); 
      $(".panel_button").animate({left:"0%"},500); 
    } 
    else{ $(".content").animate({width:"70%"},500); 
      $(".panel_button").animate({left:"29%"},500); 
      } 
});

但就像我說的，你會需要使用寬度和位置來使你的按鈕真正地在你想要的地方。並且，移除懸停的左邊的浮動物。

來源

2012-09-20 02:25:22

當使用jquery動畫擴展側欄時autoresize div

回答

相關問題