Question

我写了两个javascripts来编写我自己的模态系统，因为bootstrap有很多问题。然而，当你第一次点击它时它会正常工作它会淡入，当你点击关闭它会淡出，但下次你点击显示模态然后关闭模态它会在淡入时动画2次和2淡出时间，然后我第三次点击它，同样的事情将发生，除了它将动画3次。等等。我想它是如何包装我的功能但我不太确定。我仍然是javascript的noob。控制台或调试器中没有返回错误。

$(document).ready(function(){
        $('#helppage').hide();
    });


function displayHelp(){
      $(document).click(function(){
       $( "#helppage" ).fadeIn( "medium", function() {

        });

    });

}


function hideHelp(){
      $(document).click(function(){
       $( "#helppage" ).fadeOut( "medium", function() {

        });
    });

}

即将开始......

function toggleHelp(){
    $(document).click(function(){
        if ($('#helppage').is(":visible"))  {
             $( "#helppage" ).fadeOut( "medium", function() {

             });
        } else {
             $( "#helppage" ).fadeIn( "medium", function() {

             });
        } 
    });
}

实际工作代码

**$(function toggleHelp() {
  $(document).on('click', function() {
    $('#helppage').fadeToggle('medium', function() {
    });
  });
});**

Answer 1

每次用户点击文档时，您都会在文档中添加点击事件。因此，每次后续点击和用户点击时触发的另一个实例。所以第一次发射一次，第二次发射两次，等等。

我建议改为点击另一个元素。话虽如此，你可以尝试这样的事情：

$(function() {
  $(document).on('click', function() {
    $('#helppage').fadeToggle('medium', function() {
      // code here
    });
  });
});

Answer 2

根据我上面的评论，不更改您的代码：

function toggleHelp(){
    $(document).click(function(){
        if ($('#helppage').is(":visible"))  {
             $( "#helppage" ).fadeOut( "medium", function() {

             });
        } else {
             $( "#helppage" ).fadeIn( "medium", function() {

             });
        } 
    });
}

JQuery奇怪的动画循环

2 个答案: