Question

有人可以帮助我更好地理解这一点。当使用onclick单击按钮时，我只是淡出DOM中的box元素。

是否有一种简单的方法可以让盒子在再次点击相同的按钮时淡入？

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

更改您的功能以使用切换：

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

Answer 3

fadeToggle（）

＆＃13;

System.timer

＆＃13;

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

＆＃13;

Answer 4

使用fadeToggle()代替fadeOut() 完整参考资料：http://api.jquery.com/fadetoggle/

Answer 5

您可以使用＆＃39;是（＆＃34;：可见＆＃34;）＆＃39;检查FadeOut上的显示状态并改为执行FadeIn。

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

查看jsfiddle here

Answer 6

＆＃13;

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

＆＃13;

<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>

＆＃13;

请参阅链接：jQuery .fadeTo() -- Fade back in after fade out以获取与此相关的其他示例。

jQuery函数来反转onClick事件

6 个答案: