jQuery関数はonClickイベントを逆にする

Question

誰かがこれをよりよく理解できるように助けることができますか？ onclickを使用してボタンをクリックしたときに、DOMのbox要素をフェードアウトしています。

同じボタンをもう一度クリックすると、ボックスがフェードバックする簡単な方法はありますか？

function fade() { 
 
\t $("#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

がトグルを使用するように機能を変更し

：

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()：あなたは、おそらく使用することができますhttp://api.jquery.com/fadetoggle/

Answer 5

「（ 『可視』）である」をフェードアウト上の表示状態を確認し、代わりにFadeInを実行します。

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

チェックアウト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>

のリンクを参照してください。jQuery .fadeTo() -- Fade back in after fade outこれに関連した別の例。