jquery - Jquery：fadeOut 在fadeIn 之后立即发生

Question

我有两个元素（一个是按钮），并且希望当我按下按钮时另一个元素会淡入并保留。只有当我再次按下按钮时，它才会淡出。现在我得到的是在我再次按下按钮之前它会自动淡出。我需要使用什么样的“停止”？谢谢。

查询：

$(document).ready(function(){ 
  $("#first").click(function() { 
    $("#box").fadeIn("slow");
  });

  $("#first").click(function() { 
    $("#box").fadeOut("slow"); 
  });
}); 

Answer 1

$(document).ready(function(){ 
  $("#first").click(function() { 
    $("#box").fadeToggle("slow");
  });
}); 

单击将函数添加到事件发生时正在发生的函数堆栈中。在您的代码中，当用户单击元素时，您会同时做这两件事。

Answer 2

我会尝试类似的东西：

$(document).ready(function(){ 
  $("#first").on('click', (function() {
    //check #box visibility state
    if($('#box').is(':visible')){
        $('#box').fadeOut('slow');
    }
    else{
        $('#box').fadeIn("slow");
    }
});

Answer 3

您还可以指定按钮状态...这适用于所有类型的功能，即使是那些没有切换版本的功能（如fadeToggle）。像这样：

var buttonFaded = false;
$(document).ready(function(){ 
    $("#first").click(function() { 
        if (buttonFaded) {
            $("#box").fadeIn("slow");
            buttonFaded = true; // even better to put this inside the fadeIn callback
        else {
            $("#box").fadeOut("slow");
            buttonFaded = false;
        }
    });
}); 

编辑

如果您只需要最基本的用法，@fsw 的示例将完美运行。但是，如果您需要任何自定义/更复杂的用法，则必须执行类似的操作。

ps 向投反对票的人致以问候 - 希望有一天你会明白