problem to hide image when slideUp menu

Question

I've a menu with slideUp and SlideDown.

The user clicks in menuArea and the menu is opened and an image with a cross becomes visible. To close the button the user click in the image, and that image becomes invisible.

I'm having a problem in this step.

Look at this fiddle: http://jsfiddle.net/pedroR/7YNJY/3/

NOTE: See this fiddle in Chrome or IE because of the image

Thanks

Answer 1

The problem is that the img is contained within the #menuText element. That means when you click the img element, the click event handler for #menuText is also fired, and when that runs, it fades the img back in.

You can prevent that by adding an argument to the img click event handler, and calling stopPropagation to prevent the event from bubbling up:

$('#menuArea #menuText img').click(function(e) {
    e.stopPropagation();
    $('#menuArea ul').delay(100).slideUp(250);
    $(this).stop(true, true).delay(100).animate({
        opacity: 0
    }, '100', 'linear');
});

Here's a working example.