JavaScript的动画缩放DIV [英] JavaScript animate resizing div
问题描述
我试图把一个小动画在页面上。我有2的div并排，其中第二个具有其内容通过Ajax调用，所以在div高度不刷新页面有所不同。
I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
这基本上给我2列布局，图像巢了左侧栏下方不管是什么高度。所有优秀的！
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
我想，虽然做的事情是动画图像的过渡时，页面高度的变化得益于传入的Ajax内容。在present图像抽搐周围上下，我挺想拥有它顺利滑行下来的页面。
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
这可能吗？我没有真正进入我的JavaScript，所以我不知道如何做到这一点。我使用的网站上的jQuery库，所以算得上是前进的方向？
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?
推荐答案
OK，我只是把一个非常快速和肮脏的例子。
OK, I've just put together a very quick and dirty example.
这里是HTML：
<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的是在这里
The jQuery used is here
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：
#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;}
我添加了一个按钮，只需添加一些阿贾克斯的内容。当你做到这一点抓住div的新的高度，并以动画的高度。你可以放松一些添加动画/改变转速，使其多了几分优雅。
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
我希望这有助于。
这篇关于JavaScript的动画缩放DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
