如何使用jquery为li元素的border-radius设置动画?

时间:2016-09-12 12:41:21

标签: javascript php jquery html css

我刚刚开始做一些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时它向我显示边界半径正在改变但是在它没有弯曲边界的网站。那么我做错了什么?

以防万一:enter image description here

3 个答案:

答案 0 :(得分:1)

动画有效,它只是没有视觉效果:你的元素包含所有的样式,如果你为a的border-radius设置动画,你会看到一些变化,或者如果你设置了溢出:hide for list_el

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

这将起作用

http://codepen.io/anon/pen/PGPrgY

答案 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的示例,因此更明显:

&#13;
&#13;
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;
&#13;
&#13;