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>

我需要它朝不同的方向發展，如下圖所示：

希望有人能指出我正確的方向（沒有雙關語！）。 提前致謝。

Answer 1

您可以使用包裝器並使用right:0定位子div right:0 。

看這個演示

Answer 2

如果我能理解你的問題，解決方案就是左右替換:)

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

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

Answer 3

你可以這樣：

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

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

Answer 4

如果你可以用一個相對定位元素的包裝器包裹你的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
 }

試試這個小提琴

Answer 5

您可以在Jquery中使用Scale Effect：

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

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