jQuery анимировать левую часть элемента

Question

У меня есть цветной блок, и каждый раз, когда я нажимаю на него, я хочу, чтобы он сжался.

$('#blue').click(function(){ 
    $(this).animate({width: '90%'},1000); 
}); 

Но он идет по правой стороне. Как заставить его сжиматься с левой стороны?

CSS:

#blue{ 
height:250px; 
width:500px; 
background-color:blue; 

}

HTML:

<div id='blue'></div> 

Answer 1

можно float: right в #blue элемент внутри родителя (на котором вы можете применить какой-то поплавок очистки, если необходимо).

или просто назначить position: absolute и right : 0; для #blue элемента, внутри одного из родителей с position: relative;

Answer 2

использования

#blue { 
float: right; 
} 

или изменения CSS родителя и #blue

#blue's_parent { 
text-align: right; 

} 

#blue { 
display: inline-block; 

} 

Answer 3

попробовать ниже кода

<div id='blue'> 
</div> 

#blue{ 
    height:250px; 
    width:500px; 
    background-color:blue; 

} 

$('#blue').click(function() { 
$(this).animate({ 
    "width": "-=50px" 

}, 1000); 

});

Попробуйте это на бен http://codebins.com/codes/home/4ldqpca