[英]jQuery/CSS animate div width from left to right
I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned. 我正在尝试使用jQuery为div设置动画,背景图片的宽度从左到右逐渐减小,同时绝对定位。
I need to make this compatible with IE8 hence using jQuery. 我需要使这与IE8兼容,因此使用jQuery。
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left: 这是一个基本的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>
I need it going in a different direction, like the following image: 我需要它朝不同的方向发展,如下图所示:
Hoping someone could point me in the right direction (no pun intended!). 希望有人能指出我正确的方向(没有双关语!)。 Thanks in advance.
提前致谢。
You may use a wrapper and position the child div with right:0
. 您可以使用包装器并使用
right:0
定位子div right:0
。
If i can understand your question, solution is replace left with right :) 如果我能理解你的问题,解决方案就是左右替换:)
http://jsfiddle.net/V4XCb/6/ http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
You can like this: 你可以这样:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}
If you could wrap your elem with a wrapper which is relative positioned element and do the following: 如果你可以用一个相对定位元素的包装器包裹你的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");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/ 小提琴: http : //jsfiddle.net/V4XCb/14/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.