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.

I need to make this patible with IE8 hence using jQuery.

Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:

JSFiddle link

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.

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.

I need to make this patible with IE8 hence using jQuery.

Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:

JSFiddle link

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.

• javascript
• jquery
• css

• Just change from 'left' to 'right'. Isn't it so simple? – Dhanu Gurung Commented Jan 9, 2014 at 10:08

5 Answers 5

You may use a wrapper and position the child div with right:0.

See this demo

If i can understand your question, solution is replace left with right :)

http://jsfiddle/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:

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

Try this fiddle

You can use Scale Effect in Jquery :

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

Fiddle : http://jsfiddle/V4XCb/14/