Question

这是我第一次真正尝试将jQuery用于我的个人作品集，而且我遇到了一些问题。我希望它有一个小图像网格（.piece），点击时向左滑动并呈现一个大块（#largeview）。然后当你点击（#largeview）它应该滑开，并再次显示（.piece）！

看看我在做什么here。

代码最多可以：

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

所以我相信这是没有捕获的.click。这有什么理由吗？即使CSS中定义了高度/宽度，也是如此。

这是整个街区：

$(".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

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

            });

谢谢大家！

Answer 1

原因是#largeview未收到点击事件，其网站上的CSS中有z-index -1。这意味着click事件会弹出到其父级，并且永远不会使用#largeview目标触发。例如，如果您将z-index更改为4，您会注意到您的网页正常运作。

如果您有理由将#largeview与z-index: -1保持在CSS中，请在弹出时更改它，以便它接收点击事件。

额外提示：要检查哪个元素是点击事件的目标，我将以下内容添加到您的javascript中，并在点击时查看了网页标题：

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

Answer 2

这适合你：

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

                        }).show();
                });

        });

        $("#largeview").click(function(){
                                $(this).animate({
                                    opacity: 0,
                                    right: "-1000",
                                }, 500, function(){
                                    $(this).hide();
                                    $(".piece").animate({
                                        opacity: 1,
                                        right: "0", 
                                    }, 1000, function(){
                                        //done

                                    }).show();
                                });
                            });

Answer 3

我认为问题出在CSS中。从z-index: -1移除了#largeview后，我获得了所有点击。尝试修改common.css（这是可取的）或通过 Sudhir 编辑代码（已编辑）：

var $pieces = $('.piece'),
    $largeview = $('#largeview');

$pieces.click(function(){
    $pieces.animate({
            opacity: 0,
            right: '-1000px',
        }, 1000, function() {
            $largeview.show()
                      .animate({
                          opacity: 1,
                          right: '0',
                      }, 500, function() {
                          $largeview.find('.exit').fadeOut('slow');
                      });
    }).hide();
});

$largeview.click(function(){
    $largeview.animate({
                  opacity: 0,
                  right: '1000px'
              }, 500, function(){
                  $pieces.show()
                         .animate({
                             opacity: 1,
                             right: '0'
                         }, 1000);
              })
              .hide();
});

jQuery：无法获得.click来处理div？新用户？

3 个答案: