Question

这段代码工作正常，但在iPad上开放时有点慢。基本上我有一组带有.item类的div，当我点击其中一个时，我需要添加一个名为.is-expanded的类，并打开该框，同时关闭其他的，如果有的话打开。这些框有一个图像，点击它应该快速隐藏它并打开所选的框。这在计算机上运行良好，而在iPad上整个事情有点缓慢延迟。反正是为了让它更快还是我做任何使它变慢的事情？

HTML：

<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>
<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>
<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>

Jquery的：

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  $(".item").removeClass('is-expanded');
  $(".wrapVideo").css("display", "none");
  $("img").css("display", "block");
  $(this).addClass('is-expanded');
  $("img", this).css("display", "none");
  $(".wrapVideo", this).show();
);

Answer 1

这不是你的代码的问题，但是触摸事件有300毫秒的延迟，因为你可以使用双标签或其他东西。使用Fastclick.js消除延迟

Answer 2

我猜你的问题不在于动画是笨重的，而是从你触摸.item开始它需要时间。

您可以在此处查看解决方案： Eliminate 300ms delay on click events in mobile Safari

点击后，iPad会延迟300ms。由于您的代码，它并不慢。这在使用

的Android手机中解决了

<meta name="viewport" content="width=device-width, user-scalable=no">

在Windows手机上使用：

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Apple的safari还没有解决方案

Answer 3

这是一个已知且经常被解决的问题。这个问题有几个解决方案：

Replace all click events with tap in jquery mobile to speed up

如何在点击iPad上加速jQuery？

3 个答案: