jQuery/CSS动画：从左到右逐渐增加div宽度

Question

我想使用jQuery来动画显示一个背景图片的div在被绝对定位后从左到右减小宽度。

由于需要兼容IE8，因此使用了jQuery。

这里是一个基本的JSFiddle演示链接，展示了目前拥有的功能，但它是从右向左动画的：

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>

我希望它能走不同的方向，就像下面的图片一样：

希望有人能指导我正确的方向（没有双关语！）。先感谢了。

- lemon

---

只需要将“left”改为“right”，是不是很简单？ - Dhanu Gurung

Answer 1

您可以使用一个包装器，并使用right:0来定位子div。

查看此演示

- otinanai

---

我已经更新了你的演示 http://jsfiddle.net/melon/V4XCb/12/，加入了我的背景图片、文本，并将元素对齐到右侧，现在看起来完美无缺 :) 谢谢。 - lemon

为了将子元素相对于父元素而不是文档进行定位，需要使用“wrapper”。在实际应用中，你会发现，除非你想要绝对定位到文档的右侧，否则“wrapper”是必不可少的。 - otinanai

Answer 2

如果我能理解您的问题，解决方案是用右边替换左边 :)

http://jsfiddle.net/V4XCb/6/

.splat {
    width: 400px;
    height: 400px;
    background: blue;
    position: absolute;
    top: 100px;
    right: 100px;
}

- edonbajrami

---

我还更新了你的演示 http://jsfiddle.net/melon/V4XCb/13/ 并将背景图片对齐到右侧，现在完美运行。这个例子不需要包装器，所以我会采用这个。谢谢 :) - lemon

Answer 3

你可以喜欢这个：

<div class="box">
    <div class="splat"></div>
</div>

.box{
   width:200px;
   height: 200px;
}
.splat {
    height: 200px;
    width: 100%;
    background: blue;
    float: right;
}

- chenxiaochun

Answer 4

如果您可以将元素包装在一个相对定位的元素中，并执行以下操作：

.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
 }

尝试这个 fiddle

- Jai

Answer 5

你可以在Jquery中使用比例效果：

jQuery(document).ready(function($){
    $(document).on('click', '.splat1', function(e){
        $(this).hide("scale");
    });    
});

小提琴: http://jsfiddle.net/V4XCb/14/

- Arul