1

jQuery 运行 .animate 时是否可以进行交互？我有一个小动画，可以将图像从底部移动到顶部。我的动画从外部获取输入，以便它知道动画何时结束或更好地停止在哪个位置。

现在我有一件小事要做，那就是看看动画是否达到了 70% 以上，然后我的图像必须按比例缩小。但这只有在距离达到 70% 以上时才会发生。您可以将其与瓶颈进行比较，它的顶部越来越薄，因此我尝试缩小图像。但我找不到任何线索如何做到这一点。

举个例子：

行动 1：移动 50%——好的

操作 2：移动 90% - 正在进行中 - 但在 70% 时将图像缩小到 50%

编辑

谢谢大家的帮助，但是……很抱歉……我不明白。我试过你的解决方案，但我总是在顶部圆圈和水之间有一个偏移量：

看看这里 CodePen.io

4

1 回答 1

1

由于似乎没有其他人在回答，我至少会尝试一下？

您可以使用 step 方法或 $.Animation，使用它们几乎相同，这是后者的示例，如何使用 step 方法的示例应该很容易在 SO 上找到。

var elem  = $('#some_element'),
    width = elem.width();

$.Animation( {left: elem.position().left}, 
    {
        left: 500
    }, {
        duration: 2000
    }
).progress(function (e) {
    var start  = e.tweens[0].start, // start position
        end    = e.tweens[0].end,   // end position
        now    = e.tweens[0].now,   // where we are now
        lapsed = Math.ceil(now / end * 100); // calculate percentage

    elem.css('left', now);

    if (lapsed > 70) { // 70% reached
        elem.width(width + ((lapsed-70)*2));  // lets animate width as well
    }
});

小提琴

于 2013-11-06T16:44:53.507 回答