Animating background color, pulse effect

Question

I have made a script for animating my menu li element after mouseovering the a element inside it.

Everything works fine, but I want something else. I want the effect not to disappear but to linger as long as the mouse is over the a element.

What function to use?

Script so far:

 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/

Answer 1

You could do this using CSS's @keyframes without 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>

Answer 2

Here is the Full jQuery solution for you buddy, hope it helps:=)

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>