Jquery .css('opacity', '0') Not Working

Ok, so I've been trying something out but cant make it to work. Basically I have a bunch of

that has a hidden

in it that would appear if the &

Solution 1:

You need to prevent event buble up the DOM tree so use event.stopPropagation():

$('.close').click(function(e) {
    e.stopPropagation();
    $(this).parent().css('opacity','0');
    $(this).parent().css('z-index','-999');
});

Updated Fiddle

Solution 2:

You are still clicking in your li and running your function twice. So basically it disappears and reappears. I use this when that happens.

$('#selection li').click(function() {
    if($(this).hasClass('clicked')) {
    $(this).removeClass('clicked');
    return;
    }
    $(this).addClass('clicked');
    $(this).find('.overlay').css('opacity','1');
    $(this).find('.overlay').css('z-index','9999');
});

$('.close').click(function() {
    $(this).parent().css('opacity','0');
    $(this).parent().css('z-index','-999');
});

Share