我怎样才能以相反的方式制作动画？

Question

问候，

我正在改变作为条形的元素的宽度，这是有效的。但是我做不到 使它在相反的方向上激活它。我试过把 - 放在bar_width前面，但无济于事。宽度将被动态计算，只是因为我希望方向向左而不是向右，因此＆lt; ------- not -----------＆gt;

var bar_width=$(this).css('width') ;
$(this).css('width', '0').animate({ width: bar_width }, queue:false,duration:3500,easing: easing});

Answer 1

您可以通过同时为元素的margin-left和width设置动画，从右到左为其设置动画：

<强> CSS

#bar {
    margin-left: 100px;
    height: 10px;
    width: 0;
    background: red;
}

<强>的jQuery

$('#bar').animate({
    marginLeft: 0,
    width: 100
});

In action here

或者，如果您的元素绝对定位，则可以为left属性和width at the same time设置动画。

Answer 2

您可以使用0作为参数而不是"toggle"，而不是$(this).animate({ width: "toggle" }, queue:false, duration:3500, easing:easing}); ：

"toggle"

0会将其全宽度设置为{{1}}，然后反过来。