Question

This is probably something ease to fix and I have missed some obvious but can’t really find what it is.

When I click on backgroundcover I want the div songtitle fadeIn over backgroundcover, it works just fine but when I click on div songtitle I want songtitle to fadeOut and here is were the problems start.

I have tried a few different ways to come arround this but without success. The problem is, when I click songtitle div it fades out as it should but half a second later it fadeIn again and i can’t come arround this.

$(".backgroundcover").click(function() { 
    $(".songtitle").fadeIn("fast");
});

$(".songtitle").click(function() { 
    $(".songtitle").fadeOut("fast");
});

And if I change it to this it works just fine, BUT only one time, so I can only fadeIn the div once!

$(".backgroundcover").click(function() { 
    $(".songtitle").fadeIn("fast");
});

$(".songtitle").click(function() { 
    $(".songtitle").fadeOut({opacity : 0}, 400);
});

And the HTML:

<div class="backgroundcover">
    <div class="songtitle"><a href="#">Hejsan testar</a>Destiny's child - Unknown</div>
</div>

Answer 1

The reason for this behaviour is that the handler for the .songtitle click event allows the event to bubble up to it’s parent, which causes the .backgroundcover handler to be invoked as well (which fades the text back in).

As you’re using jQuery, you can prevent the event propagation by returning false from the handler:

$(".songtitle").click(function() { 
    $(".songtitle").fadeOut({opacity : 0}, 400);
    return false;
});

You can see a working example here.