jQuery动画元素的左侧答案

【问题标题】：jQuery animate the left side of an elementjQuery动画元素的左侧
【发布时间】：2012-07-02 19:01:49
【问题描述】：

我有一个色块，每次按下它我都希望它缩小。

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

但它在右侧。如何让它在左侧缩小？

CSS：

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

}

html:

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

【问题讨论】：

给我看看你的 html 和 css。（但我认为你的块使用样式“float：right;”，你应该改变它）
stackoverflow.com/questions/5627260/… :) 可能会有所帮助。休息下面的第一篇文章很好。

标签： jquery colors jquery-animate block

【解决方案1】：

试试下面的代码

<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 上试试这个

【讨论】：

【解决方案2】：

使用

#blue {
float: right;
}

或更改父级的 CSS 和 #blue

#blue's_parent {
text-align: right;

}

#blue {
display: inline-block;

}

【讨论】：

【解决方案3】：

你可以float: right#blue 元素在父元素中（如果需要，你可能希望在其上应用某种浮动清除）。

或者只是将position: absolute 和right : 0; 分配给#blue 元素，在带有position: relative; 的父元素中

【讨论】：

谢谢，工作流利。将在 6 分钟内接受答案。
我很乐意提供帮助。 - 我也会制作一个小提琴，但今天它似乎不起作用