首先,请看一下我的 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
功能放在下面时,它就变得无用了。
最佳答案
您的代码中存在语法错误:
$('#box').find('img').animate({opacity:
这可能会阻止您的代码表单工作。当我注释掉这一行时(并编写一些适用于您的选择器的 HTML,然后悬停和单击事件起作用,它们是独立的事件,因此您可以将它们绑定(bind)到同一元素。)
JavaScript 在执行之前在脚本标记或 .js 文件中一次性求值,因此即使您的悬停脚本纠正了点击脚本中的语法错误,也会阻止其余 JavaScript 的执行。如果这两个代码块位于单独的脚本元素(或单独的 .js 文件)中,则悬停将起作用,而单击将失败。这当然不是解决方案,您需要修复未关闭的对象文字。在 Firefox 中安装 Firebug 或在 IE 中启用 Developer tools 以查看此错误。如果没有这样的工具,可能很难进行调试。
关于jquery - .hover 在 .click 插入时不再起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15188779/