Question

我说有5个列表项目，里面的图像彼此放置200px。我试图动画这些列表项动画水平向左滑动，如果一个人按下id = #next的链接或如果一个向左滑动。反之亦然，可以正确地滑动列表项目。

每次点击或滑动都会在每个列表项上生成200px的幻灯片动画。我遇到了一个问题，垃圾邮件#next或#prev按钮会取消当前动画并启动一个新动画。这导致列表项没有滑动200px + 200px + 200 ......但是像这样200px + 140px + 120 ...这就像我说的那样动画被剪切，因此滑动距离会更短。

现在我通过在动画开始之前禁用按钮然后在结束callbak函数上重新启用它来解决点击事件。但是滑动事件仍然存在这个问题。

如何为滑动事件解决此问题？

Answer 1

如果您的代码适用于click事件处理程序，那么只需.trigger()针对每个swiperight和swipeleft事件的正确元素点击事件：

$(document).delegate('#next', 'click.my-namespace', function () {
    ...
}).delegate('#prev', 'click.my-namespace', function () {
    ...
}).delegate('#my-page-id', 'swipeleft swiperight', function (event) {
    if (event.type == 'swipeleft') {
        $('#next').trigger('click.my-namespace');
    } else {
        $('#prev').trigger('click.my-namespace');
    }
});

通过这种方式，您可以使用单个代码库来执行相同的操作，并由多个事件处理程序调用。当我将触摸事件添加到桌面设计时，我喜欢这样做。

注意我使用名称空间绑定了事件处理程序，因此您不会意外触发错误的事件处理程序。

你也可以使用.stop(true, true)，但是连续播放时可能会让你的动画感到紧张。使用.stop()时的最佳解决方案是始终设置为绝对值的动画，永远不要使用+=200px，当您使用.stop()时，可以停止动画并立即重新启动到新的绝对位置：http://api.jquery.com/stop

Answer 2

您可以采用的一种方法是为脚本设置一个全局的布尔变量，其默认值为false。然后在动画制作之前将变量设置为true，并在动画完成后将其设置为false。在设置动画之前，检查变量的状态，仅在动画为假时运行动画。代码看起来像这样：

var isAnimating = false;

function animate()
{
   if(!isAnimating) {
       //Animation code
       isAnimating = false;
   }
}

如果动画是异步的，那么你应该在动画的完成功能中设置isAnimating = false。

jQuery mobile刷卡垃圾邮件和动画

2 个答案: