Question

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

Jquery的：

$(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

您还可以指定按钮状态...这适用于所有类型的功能，即使那些没有切换版本的功能（如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的示例将完美无缺。但是，如果您需要任何自定义/更复杂的用法，则必须执行以下操作。

P.S。对downvoter的问候 - 希望你有一天能理解

Answer 3

我会尝试类似的事情：

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

Jquery：fadeOut在fadeIn之后立即发生

3 个答案: