How can I also animate border radius in jquery?

I’m trying to animate the div to extend width (like slide out animation) but I’ve gotten that to work, however I’m also trying to remove the border radius as this happens but when I do this the entire function doesn’t work like.

Thank you for any help!

//-----------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>

9 thoughts on “How can I also animate border radius in jquery?”

Leave a Comment