jquery how to only allow effect on assigned div, not children

Question

I have applied an mouseenter effect to a div. When you enter the div, it then animates another div. The problem is, the mouseenter effect applies to the children div as well. How do I apply the effect to just the parent div, but animate the children div?

JS:

$(document).ready(function() {
  $('#slideleft').mouseenter(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "0px",
  top: "0px"
             }, 400 );
  });
  $('#slideleft').mouseleave(function() {
    var $lefty = $(this).children();
      $lefty.stop().animate({ 
        left: "-700px",
  top: "200px"
             }, 400 );
  });

});

HTML

<div id="slideleft" class="slide"> 

  <div class="inner">Animate this element's left style property</div> 
</div> 



    </div>

Answer 1

You can avoid the children firing the mousenter/mouseout events by not using them, and using the jQuery .hover() function on your main div.

jQuery('#slideleft').hover(
        function() {
                // mouse over function
        },
        function() {
                // mouse leave function
        }
);

Answer 2

Use 'stopPropagation' on the children like so:

$('#slideleft *').mouseenter(function(event) {        <---- note the asterisk selector
 event.stopPropagation();                        <---- this line
});

This prevents the mouseenter event from each child propagating to the parent. Here's the documentation for it:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

P.S. It counts a lot to be polite in stackoverflow. If I interpreted a bit of an ambiguous tone in some of your responses above correctly, then you might want to consider your words a little more in the future ;-), :-)

Answer 3

To only apply the animation to the outer div, you can check the target of the event to make sure it matches the div that you selected in your jQuery method. http://docs.jquery.com/Events/jQuery.Event#event.target

Here is what your code would look like:

$(document).ready(function() {
  $('#slideleft').mouseenter(function(event) {  // added 'event' as param name
        if ( this == event.target )             // ADD THIS LINE
        {
            var $lefty = $(this).children();
            $lefty.stop().animate({
                                    left: "0px",
                                    top: "0px"
                                  }, 400 );
        }
  });

  $('#slideleft').mouseleave(function(event) {
      // uncomment the below IF statement, if you only want to hide
      //  the inner div when mousing out of the outer div.
      // Otherwise the code as is will hide your div if you mouse out of either
      //  the outer or the inner div

      //if ( this == event.target )
      //{
        var $lefty = $(this).children();
        $lefty.stop().animate({
                                left: "-700px",
                                top: "200px"
                              }, 400 );
      //}
  });

});

PS: You have an extra closing DIV tag in your example HTML that is not necessary.