如何在 jquery 中为边框半径设置动画？

Question

我正在尝试为 div 设置动画以扩展宽度（例如滑出动画），但我已经让它工作了，但是我也尝试在发生这种情况时删除边框半径但是当我这样做时整个功能不起作用。

感谢您的帮助！

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

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

  $('#enquiry-form').slideToggle('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;
  transition: width ease 1s;
}

#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

只需将border-radius: "0px"; 更改为borderRadius: "0px"

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

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

  $('#enquiry-form').slideToggle('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;
  transition: width ease 1s;
}

#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 2

您也可以像这样更改功能：通知"border-radius":"0px"

$(this).animate({
        "width": "950px",
       "border-radius": "0px"}, 1000);