我正在努力让这个 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 的动画结束处理程序，您可以通过将函数附加到大多数动画来使用它。

最后，您应该稍微重构一下您的代码。我不认为 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>