动态背景色，脉冲效果

Question

我已经为我的菜单li元素制作了一个脚本，可以在鼠标悬停在其中的a元素之后进行动画处理。

所有东西都运行正常，但我想要其他的效果。我希望效果不会消失，而是只要鼠标在a元素上方，就一直保持。

应该使用哪个功能？

到目前为止的脚本：

 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/

- Nikola L.

---

在IE9+中，您只需使用CSS3即可实现此操作。 - elclanrs

我已经为您创建了一个完整的Jquery解决方案，尽情使用吧 :P - Dejo Dekic

Answer 1

你可以使用 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>

- Weafs.py

---

不，我希望悬停发生在非li上。并且那里也没有“脉动”效果。 - Nikola L.

@chipCholocate.py 这真是令人兴奋！太神奇了；o 我从没想到 CSS 可以做到这一点。但是，这并不是很流畅。就像信号灯一样。只是一直转圈。我希望它像动画不透明度那样平滑。这可能吗？编辑：算了，我把过渡时间放慢到 0.8 到 2 秒，现在可以了。只是有点位置不对。正在尝试用 CSS 解决这个问题。 - Nikola L.

@NikolaL. - 不用谢。 :) - Weafs.py

为什么你必须在带有-webkit和不带它的情况下多次编写关键帧？这不应该是一个标准吗？为什么要使用非标准实现呢？ - Triynko

@Triynko - -webkit-声明是为了支持-webkit-浏览器。 - Weafs.py

Answer 2

这是给你的完整jQuery解决方案，希望能对你有所帮助:=)

jQuery(document).ready(function($){
var intervalID;

    $(".main-navigation ul li a").hover(function(){ 

    var that = $(this); 
     var opacityToggle = function(){
        if(!that.children('.green').length){
         $(that).prepend('<span class="green"></span>');
            $('.green').animate({opacity:1},500);
        }
        else if(that.children('.green').length){
         
       $('.green').animate({opacity:0},500,function(){
       $('.green').remove();
       });
       }
            
     
   }
    
  intervalID = setInterval(opacityToggle, 500);    

},function(){
 $('.green').remove(); 
clearInterval(intervalID);
intervalID = 0;     
});
});

ul{
list-style:none;
}

li a {
height:100%;    
text-align:center;
position:relative;
width:inherit;
display:block;

}

li {
    height: 50px;
    width: 250px;
    text-align: center;
    border: 1px solid black;

}

.green{
position:absolute;
background-color:green; 
width:100%;
height:100%;
display:block;
opacity:0;
z-index:-1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

- Dejo Dekic

---

这不是一个jQuery解决方案，你正在使用CSS进行动画，并使用jQuery切换类。 - Weafs.py

@Dejo 我明天会检查这个。今天没时间。 - Nikola L.

没有问题，朋友。 - Dejo Dekic

@Dejo Dekic。Dejo，这里有个问题。它正在为<a>元素进行动画处理，而不是其父级<li>。如果您可以更改一下（我自己也不确定如何操作），谢谢。 - Nikola L.

不，它并没有对<a>或<li>元素进行动画处理...脚本所做的是动态创建一个带有绿色类的<span>元素，然后改变其不透明度并将该元素移除... - Dejo Dekic

我认为使用jQuery是最好的方法，因为你可以在不使用任何插件的情况下动画化元素背景颜色。 - Dejo Dekic