2011-03-20 46 views
0

我的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(); 

} 
    } 
+0

我得到錯誤:t未定義 源文件:http://mojbastovan.com/gallery/script.js 行:80 – mplungjan 2011-03-20 17:20:25

回答

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

我照你所告訴過的那樣做了,但這並不意味着我必須更新我的其他函數,如$(「#box2」)。mouseover(function(),包含clearTimeout? 無論如何,我已經更新了腳本,但似乎當我將鼠標移到帶有描述的白色區域並返回圖片,說明隱藏,但自#pic img有clearTimeout它我不認爲它應該隱藏。看起來clearTimeout由於某種原因被忽略。 我已更新我的代碼,所以檢查鏈接以查看 – Mentalhead 2011-03-20 18:49:06

+0

@Mentalhead我只是再看一遍,我不再在頁面上看到任何錯誤?它也似乎在IE9和FF中工作正常。當我將鼠標懸停在圖片上時,說明會顯示在鼠標上,然後再次隱藏。 – Elliott 2011-03-20 20:33:19

+0

我同意沒有錯誤,但我仍然試圖在這裏得到一些不同的結果。我已經將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

0

我認爲這個問題可能是mouseover事件沒有被觸發時,其下的圖像幻燈片。有解決方法(跟蹤鼠標的文件上的位置):

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

我的FF和鉻之間的動畫看起來是相同的。

+0

我試着使用跟蹤鼠標座標,它工作得很好,除非你真的把鼠標移動到圖片上,在這種情況下,它不會觸發。 無論如何,我找到了一個解決方法,我已經在其他div上添加了另一個沒有內容的div,並且一切都按照計劃進行。 – Mentalhead 2011-03-22 06:19:00