Javascript/CSS Show/Hide有时不起作用

function showThis(id) {
  console.log('12' + id);
  document.getElementById(id).style.visibility = "visible";
}

function hideThis(id) {
  document.getElementById(id).style.visibility = "hidden";
}

jQuery(function() {
  jQuery("#testKey").click(function(event) {
    // NEXT LINE DOESN'T WORK
    showThis('loader2');
    jQuery.ajax({
      type: "POST",
      dataType: "json",
      url: "/api/?action=testKey",
      data: {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val()
      },
      success: function(data) {
        if (!data.error) {
          hideThis("loader2");
          if (data.keyValid == true) {
            alert("API Key is valid");
          } else {
            alert("Invalid key and/or secret.");
          }
        } else {
          alert("Error: " + data.errorMsg);
          hideThis("loader2");
          return false;
        }

      }
    });
    //hideThis('loader2');
    //return false;
  });
});

jQuery(function() {
  jQuery('#setSave').click(function(event) {
    // THIS WORKS
    showThis("loader2");
    jQuery.post(
      '/api/?action=bcSaveSettings', {
        exchange: jQuery('#setExchange').val(),
        key: jQuery('#setKey').val(),
        secret: jQuery('#setSecret').val(),
      },
      function() {
        var newKey = jQuery('#setKey').val();
        var newSecret = jQuery('#setSecret').val();
        var exchangeNum = jQuery('#setExchange').val();
        var exchangeName = jQuery("#setExchange option:selected").text();
        jQuery("#setExchange option:selected").attr('dat', newKey);
        jQuery("#setExchange option:selected").attr('dat2', newSecret);
        if (jQuery("#depExchange option[value='" + exchangeNum + "']").length > 0 && newKey.length < 1 && newSecret.length < 1) {
          jQuery("#depExchange option[value='" + exchangeNum + "']").remove();
        } else if (jQuery("#depExchange option[value='" + exchangeNum + "']").length < 1 && newKey.length > 0 && newSecret.length > 0) {
          jQuery("#depExchange").append(jQuery('<option>', {
            value: exchangeNum,
            text: exchangeName
          }));
        }
        hideThis("loader2");
        alert("Settings saved");
      }
    );
    //event.preventDefault();
  });
});

#loader1 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

#loader2 {
  background: #ecf0f1;
  position: relative;
  height: 100%;
  visibility: hidden;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #2ecc71;
  border-radius: 100%;
  animation-duration: 1s;
  animation-name: loader_dot;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes loader_dot {
  0% {
    width: 0px;
    height: 0px;
  }
  to {
    width: 50px;
    height: 50px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="testKey">test1</button>
<BR />
<BR />
<button id="setSave">test2</button>


<div id="loader2">
  <div class="dot"></div>
</div>