jQuery函數來反轉onClick事件

有人可以幫助我更好地理解這一點。當通過使用onclick單擊按鈕時，我簡單地淡出了DOM中的框元素。jQuery函數來反轉onClick事件

是否有一種簡單的方法可以使該框在同一個按鈕再次單擊時淡入？

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>

來源

2017-08-08 TheTrain

'fadeToggle（）'？ – Barmar

您是否對淡入淡出特別感興趣？或切換一些效果的一般概念？ – cyberwombat

切換衰減功能：

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

來源

2017-08-08 05:03:08 Aydin4ik

更改功能使用切換：

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

來源

2017-08-08 05:04:33 MisaGH

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>

來源

2017-08-08 05:05:26

它是一個'div'元素，所以它默認是一個顯示的塊 – animsaj

我打算刪除那個部分，不知道它還是在代碼示例下。謝謝。 –

使用fadeToggle()代替：http://api.jquery.com/fadetoggle/

來源

2017-08-08 05:08:29 animsaj

你都用不完的「是（‘：可見’）」來檢查在淡出顯示狀態和代替FadeIn。

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

時退房jsfiddle here

來源

2017-08-08 05:13:45

$(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與此另一個例子。

來源

2017-08-08 05:41:44 sureshkumar

jQuery函數來反轉onClick事件

回答

相關問題