jquery - 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);

});

在 Bin http://codebins.com/codes/home/4ldqpca上试试这个