javascript - 在 fadeIn/FadeOut 运行时防止触发其他脚本

Question

所以我有 4 组不同的脚本，它们在单击时淡入/淡出几个 div。我遇到的问题是，如果您混合/单击大量淡入/淡出效果混合在一起。如何将它们设置为仅在淡入/淡出循环完成后才触发？

这是我的 jquery 脚本。如果需要，我可以发布 html。

// 1st Navigation


$("#1stforward").click(function() {
  $("#1st").fadeOut(3500, 'swing');
  $("#2nd").delay(3375).fadeIn(4500, 'swing');

});



//2nd Navigation 


$("#2ndback").click(function() {
  $("#2nd").fadeOut(3500, 'swing');
  $("#1st").delay(3500).fadeIn(4500, 'swing');


});

$("#2ndforward").click(function() {
  $("#2nd").fadeOut(3500, 'swing');
  $("#3rd").delay(3500).fadeIn(4500, 'swing');


});




// 3rd Navigation 


$("#3rdback").click(function() {
  $("#3rd").fadeOut(3500, 'swing');
  $("#2nd").delay(3500).fadeIn(4500, 'swing');


});

$("#3rdforward").click(function() {
  $("#3rd").fadeOut(3500, 'swing');
  $("#4th").delay(3500).fadeIn(4500, 'swing');


});



// 4th  Navigation 


$("#4thback").click(function() {
  $("#4th").fadeOut(3500, 'swing');
  $("#3rd").delay(3500).fadeIn(4500, 'swing');


});

$("#4thforward").click(function() {
  $("#4th").fadeOut(3500, 'swing');
  $("#5th").delay(3500).fadeIn(4500, 'swing');


});

Answer 1

你说他们都是div吧？如果是这样，您几乎可以复制/粘贴它，这样可以防止双击。我将超时功能设置为半秒，您可以根据需要更改“500”的毫秒数。它会阻止指针事件(例如单击)半秒钟。

最好为您不想被点击的所有内容添加一个特定的类，并使用超时功能来定位它，但这应该可以。

// 1st Navigation
$("#1stforward").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
    $(this).css(
  $("#1st").fadeOut(3500, 'swing');
  $("#2nd").delay(3375).fadeIn(4500, 'swing');
});


//2nd Navigation 
$("#2ndback").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#2nd").fadeOut(3500, 'swing');
  $("#1st").delay(3500).fadeIn(4500, 'swing');
});

$("#2ndforward").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#2nd").fadeOut(3500, 'swing');
  $("#3rd").delay(3500).fadeIn(4500, 'swing');
});


// 3rd Navigation 
$("#3rdback").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#3rd").fadeOut(3500, 'swing');
  $("#2nd").delay(3500).fadeIn(4500, 'swing');
});

$("#3rdforward").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#3rd").fadeOut(3500, 'swing');
  $("#4th").delay(3500).fadeIn(4500, 'swing');
});


// 4th  Navigation 
$("#4thback").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#4th").fadeOut(3500, 'swing');
  $("#3rd").delay(3500).fadeIn(4500, 'swing');
});

$("#4thforward").click(function() {
  $('div').css('pointer-events', 'none');
  setTimeout(function() {
    $('div').css('pointer-events', 'auto');
  },500);
  $("#4th").fadeOut(3500, 'swing');
  $("#5th").delay(3500).fadeIn(4500, 'swing');
});