Question

我的脚本中有这行代码

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

    });

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

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

希望你抓住我的漂移，应该相当容易处理这个我只是在这里拍摄空白显然。

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});
    });
});

Answer 2

除了@Pranav回答之外，你应该使用“stop（true，true）”函数。

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

jQuery单击处理程序行为奇怪

2 个答案: