i1zivkovic i1zivkovic - 2 months ago 12
CSS Question

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

Answer

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

Comments