我刚刚开始做一些jquery和php,我按照Udemy的教程了解如何构建一些php网站。现在我想为li元素设置动画,以便它们的border-radius在mouseenter()上更改。
这是我的代码:
$(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>
但是当我在任何一个li元素(菜单,联系人......)上输入鼠标时,它没有动画,我的意思是当我按下F12然后瞄准li时它向我显示边界半径正在改变但是在它没有弯曲边界的网站。那么我做错了什么?
答案 0 :(得分:1)
动画有效,它只是没有视觉效果:你的元素包含所有的样式,如果你为a的border-radius设置动画,你会看到一些变化,或者如果你设置了溢出:hide for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
这将起作用
答案 1 :(得分:0)
您应该使用鼠标一起输入和离开事件
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});
答案 2 :(得分:0)
在任何现代浏览器上,您也可以通过以下方式实现此转换:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
当包含border-radius
的{{1}}悬停时,会在200毫秒的时间段内为所包含的a
元素设置.list_el
动画。
请注意,这假设您计划添加一个撤消border-radius的a
处理程序。如果您计划在鼠标离开元素时保留更新的半径,则不适用。
使用mouseleave
而不是1s
的示例,因此更明显:
0.2s
&#13;
#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;
}
&#13;