javascript - 我正在努力让这个 jquery 上下滑动工作

Question

我在 jquery 中制作动画的 div 应该滑出以扩大宽度。我已经让宽度动画工作了，但是在添加 slideDown 和 up 代码之后没有任何效果，它应该工作的方式是:

查询应该是点击展开后展开的。对于向下滑动并再次单击时， fork 首先向上滑动，然后显示的 ENQUIRIES- 返回到其原始宽度。

我不确定我的代码哪里出错了，因为我是 jquery 和 java 脚本的新手。感谢您的任何帮助!

//-----------ENQUIRY-FORM----------

$('#enquiry-shown').click(function() {
  $(this).animate({
    width: "950px",
    borderRadius: "0px"
  }, 1000);

  setTimeout(function() {
    $('#enquiry-form').slideDown('slow');
  }, 1000);

  function() {
    if ($('#enquiry-form').is("visible") {
        $('#enquiry-form').slideUp("slow");

        else($('#enquiry-form').is("hidden") {
          $('#enquiry-form ').slideDown("slow");
        });

      });
  };

});

/*--------ENQUIRIES---------*/

#enquiry-container {
  text-align: center;
  margin-bottom: 25px;
}

#enquiry-shown {
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  width: 210px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  margin: 0 auto;
}

#enquiry-name {
  font-family: "calibri light";
  font-size: 30px;
  text-align: center;
  margin: 0;
  display: inline;
  padding: 0 0 0 10px;
}

#enq-arrowdown {
  width: 25px;
  height: 16px;
  float: right;
  padding: 10px 19px 0 0;
  display: inline-block;
}

#enquiry-form {
  width: 950px;
  height: 400px;
  background-color: white;
  margin: 0 auto;
  display: none;
  border-bottom: solid 1px #d8d8d8;
  border-right: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;
}

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

<div id="enquiry-container">
  <div id="enquiry-shown">
    <h2 id="enquiry-name">Enquiries</h2>
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
  </div>
  <div id="enquiry-form">
  </div>
</div>

Answer 1

我在您的 js 代码中更改了一些内容，我使用了一个类来定义何时向上或向下滑动的条件

查看结果:

//-----------ENQUIRY-FORM----------

$('#enquiry-shown').click(function() {

  var current = $(this)

  if ($('#enquiry-shown').hasClass("active")) {

    $('#enquiry-form').slideUp('slow', function() {
      current.animate({
        width: "210px",
        borderRadius: "50px"
      }, 1000);
    });

    $('#enquiry-shown').removeClass("active");


  } else {
    current.animate({
      width: "100%",
      borderRadius: "0px"
    }, 1000, function() {
      $('#enquiry-form').slideDown('slow');
    });

    $('#enquiry-shown').addClass("active");
  }


});

/*--------ENQUIRIES---------*/

#enquiry-container {
  text-align: center;
  margin-bottom: 25px;
}

#enquiry-shown {
  background-color: white;
  padding: 10px 0;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  width: 210px;
  border: solid 1px #d8d8d8;
  border-radius: 50px;
  margin: 0 auto;
}

#enquiry-name {
  font-family: "calibri light";
  font-size: 30px;
  text-align: center;
  margin: 0;
  display: inline;
  padding: 0 0 0 10px;
}

#enq-arrowdown {
  width: 25px;
  height: 16px;
  float: right;
  padding: 0px 20px 0 0;
  display: inline-block;
  transition: all 1s;
  transform: rotate(-90deg);
}

#enquiry-form {
  width: 100%;
  height: 100px;
  background-color: white;
  margin: 0 auto;
  display: none;
  border-bottom: solid 1px #d8d8d8;
  border-right: solid 1px #d8d8d8;
  border-left: solid 1px #d8d8d8;
}

#enquiry-shown.active img {
  transform: rotate(0deg);
  padding-top: 10px;
}

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

<div id="enquiry-container">
  <div id="enquiry-shown">
    <h2 id="enquiry-name">Enquiries</h2>
    <img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
  </div>
  <div id="enquiry-form">
    This is the enquiry form
  </div>
</div>