如果声明在JavaScript中不起作用
我的jQuery图库存在一个小问题,我认为它与if语句有关。 你可以在这里看到它是如何工作的: http://mojbastovan.com/gallery/lightbox.html
我想要做的是在每次将鼠标放在它上面时显示图片的描述,但是,这不起作用。尝试打开图像,你会发现,当你将鼠标放在更大的图像上时,你不会看到它的描述,但是当你将鼠标从图像上移开时,将其放回到一切都完美无瑕。
那么问题是什么?我甚至添加了if语句,但它不起作用,所以任何人都可以帮我解决这个问题吗? 哦,另外一个问题,显示,隐藏和动画函数在Chrome中对你来说工作起伏不定?我已经在几个浏览器上测试过了,看起来Chrome浏览器呈现的这些功能有点波动。 这里是我的代码:如果声明在JavaScript中不起作用
$(document).ready(function() {
$("#box, #box2, #black, #bgal, #pic, #button").hide();
$("#main img").click(function(){
$("#load").show()
finished=false;
// alert($("#slike").children().size())
broj=$("#main img").index(this)+1;
x=$(this).attr('src');
$.getJSON('baza.json', function(json){
$.each(json.slike, function(i,v){
if (v.t_sr==x){
nsrc=v.sr;
info=v.info;
detail=v.detail;
zamena(nsrc);
//$("#pic img").attr('src',v.sr);
}
if ((broj > 2) && (broj < 9)) {
$("#slike").animate({
left: -152 *(broj-3)
}, 200)
}
else if (broj<3){
$("#slike").animate({
left:0
}, 200)
}
else if (broj>8){
$("#slike").animate({
left: -152 *5
}, 200)
}
});
});
$("#black").show(200, function(){
$("#bgal").show(200);
});
});
$("#slike img").click(function(){
$("#pic").hide(function(){
$("#load").show();
});
// alert($("#slike").children().size())
broj=$("#slike img").index(this)+1;
if ((broj > 2) && (broj < 9)) {
$("#slike").animate({
left: -152 *(broj-3)
}, 200)
}
else if (broj<3){
$("#slike").animate({
left:0
}, 200)
}
else if (broj>8){
$("#slike").animate({
left: -152 *5
}, 200)
}
x=$(this).attr('src');
$.getJSON('baza.json', function(json){
$.each(json.slike, function(i,v){
if (v.t_sr==x){
nsrc=v.sr;
info=v.info;
detail=v.detail;
zamena(nsrc);
//$("#pic img").attr('src',v.sr);
}
});
});
$("#black").show(200, function(){
$("#bgal").show(200);
});
});
$("#pic img").mouseover(function(t){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
});
$("#pic img").mouseout(function(){
t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide', {direction: 'down'}, 100);",50)
})
$("#button").mouseover(function(){
$("#button img").attr("src","images/button.png");
})
$("#button").mouseout(function(){
$("#button img").attr("src","images/buttono.png");
})
$("#button").click(function(){
$("#bgal").hide(100,function(){
$("#black").hide(100);
$("#pic").hide();
});
});
$("#box2").mouseover(function(){
clearTimeout(t);
})
$("#box2").mouseout(function(){
t=setTimeout("$('#box2, #box').dequeue().stop(true,true).hide('slide', {direction: 'down'}, 100);",50)
});
});
//FUNKCIJE
function zamena(nsrc){
$("#pic").hide();
nimg=new Image;
nimg.src=nsrc; // mora podesena promenljiva iz gl programa
nimg.onload = function(){
$("#load").hide()
$("#pic img").attr('src',nimg.src);
$("#pic").show(1);
$("#button").show();
}
}
$("#pic img").mouseover(function(){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
})
您是否尝试过在函数中添加一件T? $("#pic img").mouseover(function(t){
另外我相信你需要在函数的末尾添加一个分号。尝试:
$("#pic img").mouseover(function(t){
clearTimeout(t);
$("#info").text(info);
$("#detail").text(detail);
if (finished == false) {
$("#box2").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
$("#box").dequeue().stop(true, true).show('slide', {
direction: 'down'
}, 100);
}
});
我照你所告诉过的那样做了,但这并不意味着我必须更新我的其他函数,如$(“#box2”)。mouseover(function(),包含clearTimeout? 无论如何,我已经更新了脚本,但似乎当我将鼠标移到带有描述的白色区域并返回图片,说明隐藏,但自#pic img有clearTimeout它我不认为它应该隐藏。看起来clearTimeout由于某种原因被忽略。 我已更新我的代码,所以检查链接以查看 – Mentalhead 2011-03-20 18:49:06
@Mentalhead我只是再看一遍,我不再在页面上看到任何错误?它也似乎在IE9和FF中工作正常。当我将鼠标悬停在图片上时,说明会显示在鼠标上,然后再次隐藏。 – Elliott 2011-03-20 20:33:19
我同意没有错误,但我仍然试图在这里得到一些不同的结果。我已经将setTimeout分配给#box2上的mouseout,它应该在50ms内隐藏这些div(#box2,#box),以防将鼠标移出该div,但如果移动鼠标时我想保留这些div鼠标回到#pic img。这是我将clearTimeout(t)放在$(“#pic img”)。mouseover(function(t))之内的方法,但是由于某种原因,当我将鼠标放在#pic img上时,定时器不会被清除,它继续执行,所以怎么了? – Mentalhead 2011-03-20 23:05:14
我认为这个问题可能是mouseover
事件没有被触发时,其下的图像幻灯片。有解决方法(跟踪鼠标的文件上的位置):
Mouseover/mouseenter not fired by browser on animated/moving element
我的FF和铬之间的动画看起来是相同的。
我试着使用跟踪鼠标坐标,它工作得很好,除非你真的把鼠标移动到图片上,在这种情况下,它不会触发。 无论如何,我找到了一个解决方法,我已经在其他div上添加了另一个没有内容的div,并且一切都按照计划进行。 – Mentalhead 2011-03-22 06:19:00
我得到错误:t未定义 源文件:http://mojbastovan.com/gallery/script.js 行:80 – mplungjan 2011-03-20 17:20:25