MrF*_*dge 1 javascript jquery animation resize
我正试图在页面上放一个小动画.我有两个div并排,其中第二个有通过Ajax调用的内容,因此div高度在没有页面刷新的情况下变化.
<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列的布局,无论高度如何,图像都在左侧列的下方.都好!
我试图做的事情是,当页面高度由于传入的Ajax内容而改变时,图像的转换动画.目前图像上下颠簸,我很想让它顺畅地滑下页面.
这可能吗？我不是真正的JavaScript,所以我不知道如何做到这一点.我在网站上使用jQuery库,那么这可能是一种前进的方式吗？
好的,我刚刚汇总了一个非常快速和肮脏的例子.
这是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就在这里
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;}
我添加了一个按钮,只是为了添加一些'Ajax'内容.当你这样做时,它抓住div的新高度并动画到那个高度.您可以为动画添加一些缓动/更改速度以使其更加精致.
我希望这有帮助.
| 归档时间： |
|
| 查看次数： |
12098 次 |
| 最近记录： |