Question

我的jQuery画廊存在一个小问题，我认为它与if语句有关。你可以在这里看到它是如何工作的： http://mojbastovan.com/gallery/lightbox.html
我想要做的是每次我把鼠标放在它上面时显示描述，但是，这不起作用。尝试打开一个图像，你会发现，当你将鼠标放在较大的图像上时，你看不到它的描述，但是当你将鼠标从图像移开时，将它放回一切都可以完美无缺地工作。
所以有什么问题？我甚至添加了if语句，但它不起作用，所以任何人都可以帮我解决这个问题吗？哦，另一个问题，确实显示，隐藏和动画功能在Chrome中为你起作用吗？我已经在几个浏览器上测试了它，看起来Chrome使这些功能有些不稳定。这是我的代码：

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

}
   }

Answer 1

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

Answer 2

我认为问题可能是当图片在其下滑动时未触发mouseover事件。有解决方法（跟踪鼠标在文档上的位置）：

Mouseover/mouseenter not fired by browser on animated/moving element

我的FF和Chrome之间的动画似乎相同。

如果声明不适用于JavaScript

2 个答案: