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

Answer 2

В дополнение к ответу @Pranav, вы должны использовать функцию «stop (true, true)» ион.

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