Javascript 如何使用jquery设置li元素边界半径的动画？

我刚开始做一些jquery和php，并遵循Udemy关于如何构建一些php网站的教程。现在我想设置li元素的动画，以便它们的边界半径在mouseenter（）上发生变化

这是我的密码：

$（文档）.ready（函数（）{
$（'.list_el'）.mouseenter（函数（）{
$（此）.animate（borderRadius（300），200）；
});
函数边界半径（半径）{
返回{
borderTopLeftRadius：半径，
borderTopRightRadius：半径，
borderBottomLeftRadius：半径，
borderBottomRightRadius：半径，
};
}
});
#导航{
利润率：-27px0；
边缘顶部：50px；
}
#导航ul{
显示：内联块；
文本对齐：左对齐；
列表样式：无；
}
#李国荣{
显示：内联块；
宽度：90px；
高度：44px；
利润率：0.10px；
文本对齐：居中；
}
#海军ulli a{
显示：块；
填充：10px 15px；
颜色：白色；
边框：纯色2px白色；
背景:#3535；
外形：实心2px 3535；
文字装饰：无；
}
#导航ulli a：悬停{
背景：#8ca757；
外形：实心2px#8ca757；
}











动画工作正常，只是没有视觉效果：a元素包含所有样式，如果对a的边界半径设置动画，或者如果为列表设置溢出：隐藏，则会看到一些更改

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

例如，这将起作用

您应该同时使用鼠标进入和离开事件

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

在任何现代浏览器上，您也可以通过以下方式实现此转换：

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

当包含
a
的
列表
悬停时，在200ms的时间段内对所包含
a
元素的
边界半径设置动画

请注意，这假设您计划添加一个撤消边界半径的
mouseleave
处理程序。如果您计划在鼠标离开图元时保留更新后的半径，则此选项不适用

使用
1s
而不是
0.2s
的示例更明显：


#导航{
利润率：-27px0；
边缘顶部：50px；
}
#导航ul{
显示：内联块；
文本对齐：左对齐；
列表样式：无；
}
#李国荣{
显示：内联块；
宽度：90px；
高度：44px；
利润率：0.10px；
文本对齐：居中；
}
#海军ulli a{
显示：块；
填充：10px 15px；
颜色：白色；
边框：纯色2px白色；
背景:#3535；
外形：实心2px 3535；
文字装饰：无；
}
#导航ulli a：悬停{
背景：#8ca757；
外形：实心2px#8ca757；
}
.list_el:将鼠标悬停在a上{
边界半径：300px；
过渡：1s；
}











请使用堆栈片段将示例保留在现场。哦，非常感谢，我不知道，但viusal效果缺失，有点混乱。你能解释一下，我怎样才能使它不只是针对“a”元素，而是针对整个盒子，这样它就包围了整个盒子，而不仅仅是盒子里面@Axnyff也许你应该尝试将你链接到li集装箱的样式移动，我也打算添加mouseleave，但问题是我没有针对“a”元素，我想，非常感谢。顺便说一句：）@ish非常感谢你的帮助。我想用jquery进行练习，我还打算添加mouseleave（）。我在考虑如何制作整个盒子的动画，而不仅仅是“a”元素，我想正因为如此，我没有得到任何视觉效果@T.J.克劳德