jquery - .hover 在 .click 插入时不再起作用

Question

首先，请看一下我的 jQuery。

$(document).ready(function(){
    $(".pic").find('img').hover(
    function(){ // hover in
        $(this).animate({width: "450", height: "300"}, 200);
    }, 
    function(){ // hover out
        $(this).animate({width: "150", height: "100"}, 1000); 
    });

    $(".zoom").click(function(){     // click for the lightbox
        var go = $(this).find('img').attr("src");   // get clicked link href
        $("#box").html('<img src="'+go+'"/>');  // place href as img src value

        $('#backdrop, #box').animate({opacity: ".6"}, 500, 'linear');
        $('#box').find('img').animate({opacity:
        $('#box').animate({opacity: '1'}, 300, 'linear');
        $('#backdrop, #box').css('display', 'block');
    });

    $("#backdrop").click(function(){     // close the lightbox
        $("#backdrop, #box").animate({opacity: "0"}, 500, "linear", function(){
            $("#backdrop, #box").hide();
        });
    });
});

这就是我所做的，当没有下面写的 .click 函数时，我的 .hover 函数工作正常但是当我将 .click 功能放在下面时，它就变得无用了。

Answer 1

您的代码中存在语法错误:

$('#box').find('img').animate({opacity:

这可能会阻止您的代码表单工作。当我注释掉这一行时(并编写一些适用于您的选择器的 HTML，然后悬停和单击事件起作用，它们是独立的事件，因此您可以将它们绑定(bind)到同一元素。)

JavaScript 在执行之前在脚本标记或 .js 文件中一次性求值，因此即使您的悬停脚本纠正了点击脚本中的语法错误，也会阻止其余 JavaScript 的执行。如果这两个代码块位于单独的脚本元素(或单独的 .js 文件)中，则悬停将起作用，而单击将失败。这当然不是解决方案，您需要修复未关闭的对象文字。在 Firefox 中安装 Firebug 或在 IE 中启用 Developer tools 以查看此错误。如果没有这样的工具，可能很难进行调试。