[英]jQuery/CSS animate div width from left to right
我正在尝试使用jQuery为div设置动画,背景图片的宽度从左到右逐渐减小,同时绝对定位。
我需要使这与IE8兼容,因此使用jQuery。
这是一个基本的JSFiddle演示链接,我到目前为止,但它从右到左动画:
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
我需要它朝不同的方向发展,如下图所示:
希望有人能指出我正确的方向(没有双关语!)。 提前致谢。
您可以使用包装器并使用right:0
定位子div right:0
。
如果我能理解你的问题,解决方案就是左右替换:)
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
你可以这样:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}
如果你可以用一个相对定位元素的包装器包裹你的elem并执行以下操作:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
小提琴: http : //jsfiddle.net/V4XCb/14/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.