CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
AbuN2286
AbuN2286

Reputation: 153

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>

Upvotes: 0

Views: 1334

Answers (2)

wahdan
wahdan

Reputation: 1258

just change border-radius: "0px"; to 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>

Upvotes: 3

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

You also can change the function like this: Notice "border-radius":"0px"

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

Upvotes: 1

Related Questions