javascript - 创建一个效果以使元素淡入和淡出，而不使用 fadeToggle()

Question

你看，我使用 if else 来实现该目标，但它不起作用。我想我可能会犯一些错误。这些代码来自W3Schools，我把它改成了这个样子。

$(document).ready(function() {
  if ($("button").text() == "Click to fade in boxes")
    $("button").click(function() {
      $("#div1").fadeIn();
      $("#div2").fadeIn();
      $("#div3").fadeIn();
      $("button").text("Click to fade out boxes");
    });
  else
    $("button").click(function() {
      $("#div1").fadeOut();
      $("#div2").fadeOut();
      $("#div3").fadeOut();
      $("button").text("Click to fade in boxes");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br>
<br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Answer 1

您可以使用 .fadeToggle() 以及 .text() 回调函数中的三元运算符来缩短代码:

$(document).ready(function(){
    $("button").click(function(){
        $("#div1,#div2,#div3").fadeToggle();
        $(this).text(function() {
            return $(this).text() == "Click to fade in boxes" ? "Click to fade out boxes" : "Click to fade in boxes"
        });
    });
});

<强> jsFiddle Demo