javascript - jQuery 单击处理程序表现得很奇怪

Question

我的脚本中有这行代码

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeIn(1000);
    })
    $('#faye').click(function() {   
        $('#fayebig').fadeOut(500);

    });

我的目标是当我点击#faye 时，#fayebig 应该出现(确实如此)，当你再次点击#faye 时，#fayebig 应该消失。

但我的代码所做的是，当我点击#faye 时，#fayebig 淡入然后再次淡出，就像脚本在整个过程中运行而不让我再次点击让它淡出。

希望你能理解我的意思，处理这个问题应该相当容易，我显然只是在用这个来解决问题。

Answer 1

使用fadeToggle()否则两个会同时发生

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeToggle(1000);
    });
});

在使用 fadeToggle 时，它会在 fadeIn 和 fadeOut 之间切换

如果你想要每个淡入淡出的持续时间不同，那么使用

$(document).ready(function(){
    $('#faye').click(function() {
        $('#fayebig').fadeToggle(function(){ return $(this).is(':visible') ? 500 : 1000});
    });
});