jquery - jQuery animate the left side of an element

Question

I have a color block and every time I press on it I want it to shrink.

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

But it goes by the right side. How do I make it to shrink on the left side?

CSS:

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

}

html:

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

Answer 1

float: right親の内部の要素を使用でき#blueます（必要に応じて、ある種のフロートクリアを適用することができます）。

または、親の内部で要素にposition: absoluteとright : 0;を割り当てるだけです。#blueposition: relative;

Answer 2

使用する

#blue {
float: right;
}

または、親と#blueのCSSを変更します

#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でこれを試してください