jQuery函数可逆转onClick事件

Question

Can someone help me understand this better. I'm simply fading out the box element in the DOM when the button is clicked by using the onclick.

Is there a simple way to cause the box to fade back in when the same button is clicked again?

 function fade() { $("#box").fadeOut(); }; 

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity: 1;"></div> <button id="button3" onclick="fade();">Fade</button> 

Answer 1

切换衰落功能：

$("#box").fadeToggle();

Answer 2

Change your function to use toggle :

function fade() {
    $("#box").fadeToggle();
}

Answer 3

fadeToggle()

 function fade(){ $('#box').fadeToggle(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity: 1;"></div> <button id="button3" onclick="fade();">Fade</button> 

Answer 4

请在此处使用fadeToggle()而不是fadeOut()完整参考： http : fadeToggle()

Answer 5

You can possibly make use of the 'is(":visible")' to check display status on the FadeOut and do the FadeIn instead.

function fade() {
    var mybox = $("#box");
    if (mybox.is(":visible"))
        mybox.fadeOut();
    else mybox.fadeIn();
};

Check out the jsfiddle here

Answer 6

 $( function() { x=1; } ); function fade() { if(x==1){ $("#box").fadeOut(1000) && (x=0); } else $("#box").fadeIn(1000) && (x=1); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px; opacity: 1;"></div> <button id="button3" onclick="fade()">Fade</button> 

please refer the link: jQuery .fadeTo() -- Fade back in after fade out for another example related to this.