javascript jQuery/CSS 从左到右动画 div 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21016951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery/CSS animate div width from left to right
提问by melon
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.
希望有人能指出我正确的方向（没有双关语！）。提前致谢。
回答by otinanai
回答by edonbajrami
If i can understand your question, solution is replace left with right :)
如果我能理解你的问题，解决方案是用右替换左:)
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
回答by chenxiaochun
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;
}
回答by Jai
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
}
回答by Arul
You can use Scale Effect in Jquery :
您可以在 Jquery 中使用缩放效果：
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/
