Question

我有一个复选框，点击后我想要向上滑动复选框并且不显示它。我可以让它向上滑动然后1秒后再次显示其丑陋的自我，我该如何解决这个问题。非常感谢你

<html>
<head>

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

  <style type="text/css">
    .hiddenPanel
    {
      CLEAR: both;
      DISPLAY: none;
    }
    .dataEntry
    {
      BACKGROUND-COLOR: #FFFFEB;
      HEIGHT: 300px;
      MIN-WIDTH: 300px;
      MARGIN: 3px;
    }
  </style>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#chkTestPay').click(function ShowMedPay() {
        if ($('#chkTestPay').is(':checked')) {
          $('#toggleTestPanel').slideUp();
          $('#TestPanel').slideDown(1200);
          $('#toggleTestPanel').css("display", "none");
        }
        else
          $('#TestPanel').slideUp(2000);
        $('#toggleTestPanel').slideDown(1200);
      });
    });
  </script>

</head>
<body>
  <div class="togglePanelOption" id="toggleTestPanel">
    <h3>
      Test?
      <input type="checkbox" id="chkTestPay" /></h3>
  </div>
  <div id="TestPanel" class="hiddenPanel">
    <h3>
      Test 123
    </h3>
    <div class="dataEntry">
      enter info please
    </div>
  </div>
</body>
</html>

Answer 1

你的其他人的定义很糟糕，所以滑动总是在运行。

<script type="text/javascript">
     $(document).ready(function() {
      $('#chkTestPay').click(function ShowMedPay() {
        if ($('#chkTestPay').is(':checked')) {
          $('#toggleTestPanel').slideUp();
          $('#TestPanel').slideDown(1200);
          $('#toggleTestPanel').css("display", "none");
        } else {
          $('#TestPanel').slideUp(2000);
          $('#toggleTestPanel').slideDown(1200);
        }
      });
    });
</script>

Answer 2

这是你想要实现的目标吗？ http://jsfiddle.net/FAAjc/

jquery slideup / slidingown功能

2 个答案: