Question

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

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

举个例子：

行动1：移动50％ - 确定

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

修改

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

Look here at CodePen.io

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

FIDDLE

jQuery在动画期间使用if-else

1 个答案: