CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
user6561396
user6561396

Reputation:

How can I animate border-radius of li element with jquery?

I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().

Here is my code:

$(document).ready(function() {
  $('.list_el').mouseenter(function() {
    $(this).animate(borderRadius(300), 200);
  });

  function borderRadius(radius) {
    return {
      borderTopLeftRadius: radius,
      borderTopRightRadius: radius,
      borderBottomLeftRadius: radius,
      borderBottomRightRadius: radius,
    };
  }
});
#nav {
  margin: -27px 0 0;
  margin-top: 50px;
}
#nav ul {
  display: inline-block;
  text-align: left;
  list-style: none;
}
#nav ul li {
  display: inline-block;
  width: 90px;
  height: 44px;
  margin: 0 10px;
  text-align: center;
}
#nav ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  border: solid 2px white;
  background: #353535;
  outline: solid 2px #353535;
  text-decoration: none;
}
#nav ul li a:hover {
  background: #8ca757;
  outline: solid 2px #8ca757;
}
<div id="nav">
  <ul id="my_navbar">
    <li class="list_el"><a href="index.php">Home</a>
    </li>
    <li class="list_el"><a href="team.php">Team</a>
    </li>
    <li class="list_el"><a href="menu.php">Menu</a>
    </li>
    <li class="list_el"><a href="contact.php">Contact</a>
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?

Just in case :enter image description here

Upvotes: 2

Views: 560

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075209

On any modern browser, you can also achieve this transition with simply:

.list_el:hover a {
  border-radius: 300px;
  transition: 0.2s;
}

That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.

Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.

Example using 1s rather than 0.2s so it's more obvious:

#nav {
  margin: -27px 0 0;
  margin-top: 50px;
}
#nav ul {
  display: inline-block;
  text-align: left;
  list-style: none;
}
#nav ul li {
  display: inline-block;
  width: 90px;
  height: 44px;
  margin: 0 10px;
  text-align: center;
}
#nav ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  border: solid 2px white;
  background: #353535;
  outline: solid 2px #353535;
  text-decoration: none;
}
#nav ul li a:hover {
  background: #8ca757;
  outline: solid 2px #8ca757;
}
.list_el:hover a {
  border-radius: 300px;
  transition: 1s;
}
<div id="nav">
  <ul id="my_navbar">
    <li class="list_el"><a href="index.php">Home</a>
    </li>
    <li class="list_el"><a href="team.php">Team</a>
    </li>
    <li class="list_el"><a href="menu.php">Menu</a>
    </li>
    <li class="list_el"><a href="contact.php">Contact</a>
    </li>
  </ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 0

Ish
Ish

Reputation: 2105

You should use mouse enter and leave event together 

$('.list_el').on("mouseenter", function() {
        $(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
         $(this).find("a").animate(borderRadius(0), 200);
});

Upvotes: 0

Axnyff
Axnyff

Reputation: 9964

The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el

$('.list_el').mouseenter(function() {
  $(this).find("a").animate(borderRadius(300), 200);
});

this will work for instance

http://codepen.io/anon/pen/PGPrgY

Upvotes: 1

Related Questions