[英]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.我刚开始做一些 jquery 和 php,我按照 Udemy 的教程学习了如何构建一些 php 网站。 Now I want to animate the li elements so that their border-radius changes on mouseenter().
现在我想为 li 元素设置动画,以便它们的边框半径在 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.但是当我在任何 li 元素(菜单,联系人..)上输入鼠标时,它没有动画,我的意思是当我按 F12 并定位 li 时,它向我显示边界半径正在改变,但在网站上它不弯曲边界。 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动画有效,它只是没有视觉效果:您的 a 元素包含所有样式,如果您为 a 的边框半径设置动画或为 list_el 设置 overflow: hidden,您会看到一些变化
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance例如,这将起作用
http://codepen.io/anon/pen/PGPrgY http://codepen.io/anon/pen/PGPrgY
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.当包含
a
的.list_el
悬停时,它会在.list_el
内为包含a
元素的border-radius
设置动画。
Note that this assumes you were planning to add a mouseleave
handler that undoes the border-radius.请注意,这假设您计划添加一个撤销边界半径的
mouseleave
处理程序。 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:使用
1s
而不是0.2s
例子,所以它更明显:
#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.