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?
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
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);
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.