我该如何以相反的方式制作动画? [英] How can I animate the opposite way?

问题描述

问候，

我正在更改用作bar且可以正常工作的元素的宽度.但是我不能 使其朝相反的方向动画.我试着把-放在bar_width前面，但无济于事.宽度将被动态计算，只是我希望方向是向左而不是向右，因此< -------而不是----------->

I am changing the width of an element which serves as a bar , and that works. However I can't make it so that it animates it in the opposite direction. I tried putting - in front of bar_width but to no avail. Width will be dynamically calculated it's just that I want the direction to go to the left rather than to the right like so <------- not ----------->

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

推荐答案

您可以通过同时为元素的margin-left和width设置动画来从右到左对其进行动画处理:

You could animate it from right to left by animating both the margin-left and width of the element at the same time:

CSS

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

jQuery

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

在此处操作.

或者，如果元素的位置绝对正确，则可以同时设置left属性和width 的动画时间.

Alternative, if your element is positioned absolutely you could animate the left property and width at the same time.

这篇关于我该如何以相反的方式制作动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！