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