jQuery stop child elements animate on hover of parent

Question

I'm trying to animate the div within the #jam list.

The li has a background image that when hovered displays the box class.

The problem I have is that when I hover the box class div's they trigger the hover aswell.

How can I make only the li background image hover not the elements inside it?

/*Services Pyrimid*/
$('ul#jam li').hover(function() {
    $(this).find('div:first').animate({opacity: 1.0, left:190}, 500);
},function(){
    $(this).find('div:first').animate({opacity: 0, left:-400}, 500);        
});


<ul id="jam">
 <li id="spot-a">
  <div class="box">
   text
  </div>
 </li>
 <li id="spot-b">
  <div class="box">
   text
  </div>
 </li>
</ul>

Answer 1

Try adding :

$(".box").on('mouseenter mouseleave', function(e) {
    e.stopPropagation();
});

or do :

$('ul#jam li').not('.box').hover(function() {...