即時信使，如何追加完整的div到#container的DIV

我試着去建立，坐在屏幕下方的Facebook風格的酒吧即時通訊，多次嘗試後，我有一個基本的設置，但林停留在如何解決這個問題。我希望我的問題足夠具體。想想Facebook即時通訊，這是我試圖以簡單的形式進行復制。即時信使，如何追加完整的div到#container的DIV

我有2個與我的代碼相關問題，1個問題：

如果你點擊綠色的朋友div的它向下擴展，如何使它向上拓展？
什麼是額外的div連接到#container的，當你點擊任何一個朋友的好辦法？

問題：。我可以使用jQuery UI等組件嗎？或者有什麼地方可以從中學習？林relativly jQuery的新手，已經嘗試了好幾個小時找到如何做到這一點:(

的HTML：

<div id="container"> 
    <div id="friends"> 
    Friends: (2) Online 
     <ul> 
      <li id="person">Doutzen</li> 
      <li id="person">Alexandra</li> 
     </ul> 
    </div> 
    container, new chat boxes appear here 
</div>

的CSS：

body { 
    padding-top: 400px; 
} 

#container { 
    background-color: grey; 
    width: 100%; 
    height: 30px; 
} 

#friends { 
    position: relative; 
    height: 10px; 
    color: white; 
    width: 150px; 
    background-color: green; 
    padding: 10px; 
    float: right; 
    overflow: hidden; 
} 

#friends ul li { 
    padding: 10px; 
    margin: 10px; 
    background-color: darkgreen; 
}

Jquery：

$('#friends').toggle(function(){ 
    $(this).animate({'height': '100px'}, 10); 
}, function(){ 
    $(this).animate({'height': '10px'}, 10); 
}); 

$(".person").click(function() { 
     $('#container').append("<div class='chat'>chat with ...</div>"); 
});

工作實施例： http://jsfiddle.net/qJCmF/5/

來源

2012-10-04 Rubytastic

1）對於向上和向下擴大，看看所述Slide jQuery UI的效果。如圖所示，您可以將其與$('#my-element').show('slide');和$('#my-element').hide('slide');結合使用。此外，還有一些其他效果可以以同樣的方式使用，可能更適合您的需求;你甚至可以提供額外的參數來控制效果呈現的方式。

2）爲了將附加DOM元素附加到容器中，可以繼續調用append()或prepend() jQuery函數，並且它們會不斷添加元素到容器的子元素的結尾或開始位置。

來源

2012-10-04 11:20:25

感謝diden't知道幻燈片效果，我檢查你的其他建議太 – Rubytastic

即時信使，如何追加完整的div到#container的DIV

回答

相關問題