需要解決方案的JavaScript小故障（可能很簡單）

我目前有一個JavaScript應用於兩個圖像。視頻可以在這裏看到：http://www.youtube.com/watch?v=DYc8swGK5Lw 我在視頻中懸停的第一張圖片行爲正常，但是，第二張圖片沒有。第二張照片似乎在懸停後立即應用邊距頂部，而不是像第一張那樣進行過渡。這會導致瀏覽器在恢復穩定性之前感到困惑並將鼠標懸停並移出一次或兩次。兩張圖片都有應用於它們的gallery_left類，但視頻中第一張圖片已經應用了左側ID。視頻中的第二張圖片已應用了左側ID。最後，這是代碼。需要解決方案的JavaScript小故障（可能很簡單）

$(function() { 
var margin_top; 
$('img.gallery_left').mouseover(function(){ 
    if($(this).attr('id') == "left4") { 
     margin_top = '105px'; 
    } else { 
     $(this).css('marginTop'); 
    } 
    if($(this).attr('id') == "left7") { 
     margin_top = '353px'; 
    } else { 
     $(this).css('marginTop'); 
    } 

    $(this).animate({ 
     borderWidth: '10px', 
     width: '750px', 
     height: '500px', 
     marginLeft: '1px', 
     zIndex: '15', 
     marginTop: margin_top, 
    }, 
    'default'); 
}); 

$('img.gallery_left').mouseout(function(){ 
    if($(this).attr('id') == "left4") { 
     margin_top = '261px'; 
    } else { 
     $(this).css('marginTop'); 
    } 
    if($(this).attr('id') == "left7") { 
     margin_top = '511px'; 
    } else { 
     $(this).css('marginTop'); 
    } 

    $(this).animate({ 
     borderWidth: '4px', 
     width: '300px', 
     height: '200px', 
     marginLeft: '1px', 
     zIndex: '0', 
     marginTop: margin_top, 
    }, 
    'default'); 
}); 
});

我必須將代碼應用到所有其他圖片，但對於初學者，我只是對這兩張圖片進行操作。請幫助我，並嘗試使用此代碼識別問題。

來源

2013-02-24 Ben

很難在沒有看到HTML的情況下對此進行故障排除......對兩個圖像應用相同的Javascript函數，因此理論上兩個邊緣的更改時間應該相同，即使實際邊距值不同。 – 2013-02-24 21:42:39

@MattB。該代碼是從字面上是這樣的： \t \t \t \t \t \t \t \t \t \t \t \t 等 – Ben 2013-02-24 22:15:57

這條線：

 $(this).css('marginTop');

什麼都不做。你可能意思是這樣的：

if(this.id == "left4") { 
    margin_top = '261px'; 
} else if (this.id == "left7") { 
    margin_top = '511px'; 
} else { 
    margin_top = $(this).css('marginTop'); 
}

這樣，你存儲的CSS屬性。另外，您只需要一個if/else系列，因此您不會用第二個系列的else覆蓋第一個系列的if。

來源

2013-02-24 21:51:18 Dennis

不改變，在視頻發生的結果。 – Ben 2013-02-24 22:15:32

你確定要清除緩存嗎？此外，請確保您更改mouseover/mouseout'if'語句。你可以製作一個jsFiddle而不是製作完全非互動的視頻嗎？ – Dennis 2013-02-24 22:26:20

也許問題出在，如果：我想應該是這樣的

if($(this).attr('id') == "left4") { 
    margin_top = '105px'; 
} else if($(this).attr('id') == "left7") { 
    margin_top = '353px'; 
} else { 
    margin_top = $(this).css('marginTop'); 
}

來源

2013-02-24 21:52:11 Ciack404

不，不修復它... – Ben 2013-02-24 22:23:51

對於你沒有實際上改變的是margin-top在所有（在你的代碼中沒有的第一圖像，你改變margin-top圖片ID left1）。正如@丹尼斯指出的那樣，$(this).css('marginTop');什麼都不做。所以實際上你的margin-top代碼在整個電路板上都是有問題的，而不僅僅是第二個圖像 - 這只是你實際上並沒有改變第一個圖像的任何東西，使它看起來工作正常（我猜你期望第一個圖像有一個margin-top爲零？）。

我認爲這個問題可能是您將'default'作爲第二個參數傳遞給$.animate。我查看了$.animate的文檔，我沒有看到任何地方提到的'default'作爲該參數的有效選項（duration參數）。請改爲將其設置爲fast,slow或某些數字值。

來源

2013-02-24 22:48:07

需要解決方案的JavaScript小故障（可能很簡單）

回答

相關問題