为什么我的 jQuery 循环动画不起作用？

Question

我正在尝试无限循环 jQuery 动画以及 jQuery UI 的“爆炸”效果，直到某个事件停止它。这是我的代码：

function movingPicture() {
    $('img').delay(2800).animate({right: '44%'}, 3000, movingPicture).effect('explode');
    $('img').css('right', '-100px');
    $('img').show();
};
movingPicture();

根据我所做的一些研究，这应该让它无限循环。 img 将向左移动到文档的视图中，爆炸，然后重置回原始位置。然后，我希望它无限地执行相同的动画直到停止。我究竟做错了什么？另外，当事件发生时我可以停止循环的方法是什么，比如单击按钮。顺便说一句，我是初学者，所以尽量保持简单。谢谢！

Answer 1

你会这样做

function movingPicture() {
    $('img').delay(2800).animate({right: '44%'}, 3000, function() {
        $(this).effect('explode', function() {
            $(this).css('right', '-100px').show();
            movingPicture();
        });
    });
}
movingPicture();

FIDDLE