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();
        });
    });
});

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

Answer 1

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

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

这可能会阻止您的代码表单正常工作。当我注释掉这一行（并构成一些适用于你的选择器的HTML，然后悬停和点击事件工作时，它们是独立事件，因此你可以将它们绑定到同一个元素。）

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

插入.click后，.hover不再起作用

1 个答案: