Question

我有一个简单的动画问题是我希望动画在我再次点击之前结束？

$(".next").click(function() {

 $('#result').animate({
    left: '-=250',
   }, 1000, function() {
  pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

Answer 1

答案很简单，使用.data()方法在项目上设置可点击标记。您可以在完整的功能中重新启用它。

来自jQuery.com：.data() Documentation

.data（）方法允许我们以一种不受循环引用和内存泄漏安全的方式将任何类型的数据附加到DOM元素。

我们可以为单个元素设置几个不同的值，并在以后检索它们：

在动画上使用完整方法（您已经使用该方法显示/隐藏下一个/上一个按钮，我们可以重新启用要点击的按钮。

请注意，我们会将$(this)存储到btn中，以便可以从完整功能的关闭中进行访问。

$(".next").click(function() {
  var btn = $(this);
  if (btn.data('running'))
    return;

  btn.data('running', true);

  $('#result').animate({
    left: '-=250',
    }, 1000, function() {
       pos = $('#result').position();

       if (pos.left <= -550) {
         $('.next').hide();
       }
       if (pos.left <= -250) {
         $('.prev').show();
       }

       // Unset it here, this lets the button be clickable again
       btn.data('running', false);
    }
   );
});

Answer 2

您可以将其设置为在animate再次启动之前自动完成动画：

$('#result').stop(true, true).animate({ ...

Answer 3

单击时禁用该按钮并使用.animate函数的完整函数调用来重新启用它：

.animate（properties [，duration] [，easing] [，complete] ）

完成动画完成后调用的函数。

Answer 4

单击时禁用该按钮，并使用“SetTimeout”功能在相同的时间段后启用它。

$(".next").click(function() {

   $(this).enabled = false;
   setTimeout('enableButtons()', 250);     }

   $('#result').animate({
      left: '-=250',
   }, 1000, function() {
    pos = $('#result').position();

  if (pos.left <= -550) {
$('.next').hide();
  }
  if (pos.left <= -250) {
    $('.prev').show();
  }
});

function enableButtons() {
    $(".next").enabled = true;
}

jquery-避免双击

4 个答案: