Question

This is my first time really trying to use jQuery for my personal portfolio and I’m having some problems with it. I want it to have a grid of small images (.piece) that when clicked slides to the left and presents a single large piece (#largeview). Then when you click (#largeview) it should slide away, and show (.piece) again!

See what I’m doing here.

The code works up to:

 $("#largeview").click(function(){
                                $("#largeview").animate({
                                    opacity: 0,
                                    right: "-1000",

So I believe it’s the .click that’s not catching. Is there any reason for this? This is even with height/width defined in the CSS.

This is the whole block:

$(".piece").click(function(){
                $(".piece").animate({
                        opacity: 0,
                        right: "+=1000",
                    }, 1000, function(){
                            $(".piece").hide();
                            $("#largeview").show();
                            $("#largeview").animate({
                                opacity: 1,
                                right: "0",
                            }, 500, function(){
                                $("#largeview .exit").fadeOut("slow");
                                $("#largeview").click(function(){
                                    $("#largeview").animate({
                                        opacity: 0,
                                        right: "-1000",
                                    }, 500, function(){
                                        $("#largeview").hide();
                                        $(".piece").show();
                                        $(".piece").animate({
                                            opacity: 1,
                                            right: "0", 
                                        }, 1000, function(){
                                            //done

                                        });
                                    });
                                });
                            });
                    });

            });

Thank you to everyone!

Answer 1

The reason is that #largeview is not receiving the click event, it has a z-index of -1 in your CSS on your website. This means that the click event pops up to the its parent and never fires with a target of #largeview. If you change the z-index to 4 for instance, you’ll notice that your page works correctly.

If you have a reason to keep #largeview with z-index: -1 in the CSS, change it when it gets popped in so that it will receive the click event.

Extra-tip: To check which element was the target of the click event, I added the following to your javascript and watched the page title as I clicked:

$('*').click(function (e) {
    document.title = e.target.tagName + '#' + e.target.id + '.' + e.target.className;
});