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

Question

您好，

我正在更改用作 bar 的元素的宽度，并且有效。然而我不能 使它朝相反的方向动画。我尝试将 - 放在 bar_width 前面，但无济于事。宽度将动态计算，只是我希望方向向左而不是向右，就像这样 <-------- 不是 ---------->

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

在此处执行。

或者，如果您的元素是绝对定位的，您可以为 left 属性和 width 同时。

Answer 2

您可以使用 "toggle" 作为参数，而不是 0，如下所示：

$(this).animate({ width: "toggle" }, queue:false, duration:3500, easing:easing});

"toggle" 将从其全宽度动画到 0，下次则相反。