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

Posted 2023-05-08

【中文标题】如何在 jquery 中为边框半径设置动画？

【英文标题】：How can I also animate border radius in jquery?

【发布时间】：2017-12-05 07:40:49

【问题描述】：

我正在尝试为 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>

【问题讨论】：

jQuery animate css border-radius property (webkit, mozilla)的可能重复

【参考方案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>

【讨论】：

非常感谢，你想太多了，但它有效，我会在你允许的时候勾选你的评论

【参考方案2】：

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

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