OK、私はちょうど非常に迅速かつ汚れた例をまとめました。
ここではHTMLです：私はいくつかの「アヤックスのコンテンツを追加するボタンを追加した
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
：
<body>
<a href="####" id="addContent">Add content</a>
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
jQueryの使用は、ここに
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
とCSSです。これを行うと、divの新しい高さがグラブされ、その高さにアニメートされます。アニメーションにイージングを追加したり、スピードを変えて少し磨かれたりすることもできます。
こちらがお役に立てば幸いです。
http://jsbin.comにコードを入力し、保存された公開URLにリンクすることで、OPにライブデモを提供することができます –
ああ、ありがとう、チップありがとう。それは私が上でやったことよりはるかに簡単に聞こえます:) – Nooshu
ここではjsbinのバージョンhttp://jsbin.com/uyoxiです。私は私の開発版では、左の列の下部に画像を添付しているが、コードを編集する場所を参照する必要があります。ふわふわ！ – Nooshu