我正在努力让这个jquery下滑并开始工作

Question

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

应该点击查询，然后展开并扩展后。对于向下滑动和再次单击时，首先将叉子向上滑动，然后显示的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>

Answer 2

我不知道你是否想达到这个效果，但试试这个并给我反馈：

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

  if($('#enquiry-form').is(':visible')){
    $('#enquiry-form').slideUp('slow', function(){
      $('#enquiry-shown').animate({
        width: "210px",
        borderRadius: "50px"
      }, 1000);
    });
  }
  else if($('#enquiry-form').is(':hidden')){
    $('#enquiry-shown').animate({
      width: "950px",
      borderRadius: "0px"
    }, 1000, function(){
      $('#enquiry-form').slideDown('slow');
    });
  }
});

Answer 3

您有很多语法错误，例如错误匹配的括号，缺少括号，缺少函数名称，以及在使用else if时使用else。 当您修复所有这些内容时，您的点击功能看起来已经具有您的一些预期功能。

接下来我建议删除setTimeout以支持jQuery的animate end handler，你可以通过将函数附加到大多数动画来使用它。

最后，您应该稍微重构一下代码。我不认为is('visible')做你认为它做的事情，但幸运的是有一个slideToggle方法可以很容易地做你想做的事。

然后，您的点击处理程序需要考虑菜单已打开且未打开时的情况，然后采取相应措施。为此，您可以考虑使用toggleClass，然后在决定要执行的动画之前检查它与hasClass的类。

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

$('#enquiry-shown').click(function() {
  
  if(!$(this).hasClass('closed')){ // if the form is not closed
    $(this).animate({ // animate the form to open state
      width: "950px",
      borderRadius: "0px",
    }, 1000, ()=>{ 
      $("#enquiry-form").slideToggle() 
    }); 
  }else{ // if the form is closed animate in reverse order
    $("#enquiry-form").slideToggle(
      ()=>{
        $(this).animate({
          width : "210px",
          borderRadius : "50px"
        }, 1000);
      }
     )
  }
  $(this).toggleClass('closed'); // toggle the class

});

/*--------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> Hello I am a form </div>
  </div>
</div>