Question

所以我有4个不同的脚本集，点击时淡入/淡出几个div。我遇到的问题是如果你混合/点击一下fadeIn / Out效果混合在一起。如何在完成FadeIn / Out循环后将它们设置为触发？

这是我的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

你说他们都是正确的？如果是这样，你几乎可以复制/粘贴它，这将防止双击。我将超时功能设置为半秒，您可以根据需要更改“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');
});

Answer 2

您可以创建一个函数来检查当前使用id或"back"结尾的"forward"的任何元素是否使用jQuery :animated选择器或{{1} } .queue()大于.length，如果0未在当前true处理程序中调用.animate()，则在元素处调用click < / p>

.animate()

例如

function animating() {
  return $("[id$=back], [id$=forward]").is(":animated") 
         || $("[id$=back], [id$=forward]")
            .filter(function(i, el) {return $(el).queue().length}).length
}

Answer 3

fadeIn和fadeOut函数调用有complete callback支持。在这里阅读更多相关信息。 http://api.jquery.com/fadein/

所以实现应该是这样的。

$( "#3rd" ).fadeIn( "slow", function() {

    // Animation complete
    $( "#2nd" ).fadeOut( "slow", function() {
    // Animation complete
    });

});

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

3 个答案: