javascript – 动画背景颜色,脉冲效果

我已经制作了一个脚本,用于在将鼠标移动到其中的元素后动画我的菜单li元素.

一切都很好,但我想要别的东西.我希望效果不会消失,只要鼠标悬停在元素上就会停留.

使用什么功能？

脚本到目前为止：

 jQuery(document).ready(function($){
        $(".main-navigation a").mouseover(function() {
        $(this).parent().animate({
    backgroundColor: "green"
    }, "normal"),
    $(this).parent().animate({
    backgroundColor: "transparent"
    })
    .mouseleave(function() {
    $(this).parent().animate({
    backgroundColor: "transparent"
    }, "normal")
    });
    });
});

http://jsfiddle.net/neugu8r9/

解决方法:

你可以使用CSS的@keyframes而不用jQuery来做到这一点.

ul {
  position: relative;
  width: 250px;
  height: 50px;
  padding: 0;
  margin: 0;
  list-style: none;
}
li a {
  width: 100%;
  height: 100%;
  line-height: 50px;
  text-align: center;
}
li a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1;
}
li {
  position: relative;
  height: 50px;
  width: 250px;
  text-align: center;
  border: 1px solid black;
}
a:hover:before {
  -webkit-animation: pulse 0.8s ease-in-out infinite alternate;
  animation: pulse 0.8s ease-in-out infinite alternate;
}
@-webkit-keyframes pulse {
  0% {
    background: transparent;
  }
  50% {
    background: green;
  }
  100% {
    background: transparent;
  }
}
@keyframes pulse {
  0% {
    background: transparent;
  }
  50% {
    background: green;
  }
  100% {
    background: transparent;
  }
}

<nav class="main-navigation">
  <ul>
    <li><a>Menu-item#1</a></li>
    <li><a>Menu-item#2</a></li>
    <li><a>Menu-item#3</a></li>
    <li><a>Menu-item#4</a></li>
  </ul>
</nav>

标签：html,javascript,jquery,css,jquery-animate
来源： https://codeday.me/bug/20190725/1528839.html