如何使JavaScript不覆蓋以前的功能？

Question

<!-- inEar --> 
$("#inEear ul li a").ready(function(){ 
    thisBlock = $("#dueceBlock"); 
    maxWidth = 280; /*controls max width of the block*/ 
    minWidth = 180; /*controls min widht of the block*/ 


    $("#inEar ul li a").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 
<!-- inEar end--> 

<!-- onEar --> 
$(".onEarLink").ready(function(){ 
    thisBlock = $("#chillBlock"); 
    maxWidth = 280; /*controls max width of the block*/ 
    minWidth = 180; /*controls min widht of the block*/ 


    $(".onEarLink").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 
<!-- onEar end--> 

<!-- overEar --> 
$(".overEarLink").ready(function(){ 
    thisBlock = $("#heroBlock"); 
    maxWidth = 400; /*controls max width of the block*/ 
    minWidth = 100; /*controls min widht of the block*/ 


    $(".overEarLink").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 

---

我的問題是：我的第三個功能（.overEarLink）保持覆蓋第一個函數（#inEar UL李一）和第二功能（.onEarLink）。這不是我想要的。我想做三個函數調用不同的部分並控制他們自己的動畫。我不明白爲什麼即使我指定了每個函數的不同名稱，爲什麼第三個函數仍然會覆蓋第一個函數和第二個函數。

感謝大家的幫助。

---

添加var works，我很感謝您的答案。但是，我也在maxWidth和minWidth上使用了var。然而，同樣的事情發生了，第三個var重寫了第一個var和第二個var。 這裏是它的代碼：

$("#overEar ul li a").ready(function(){ 
    var thisBlock = $("#heroBlock"); 
    var maxWidth = 358; /*controls max width of the block*/ 
    var minWidth = 180; 

    var thisBlock = $("#reverbBlock"); /*controls min widht of the block*/ 
    var maxWidth = 340; 
    var minWidth = 180; 

    var thisBlock = $("#solosBlock"); 
    var maxWidth = 402; 
    var minWidth = 180; 

    $("#overEar ul li a").hover(
     function(){ 
     $(thisBlock).animate({width: minWidth+"px"}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth+"px"}, {specialEasing:'easeInOutBounce', duration:300}, { queue:false, duration:500 }); 
    $(this).animate({width: maxWidth-"px"}, {specialEasing:'easeInOutBounce', duration:100}, { queue:false, duration:500 }); 

     thisBlock = this; 
     } 
    ); 
}) 

感謝大家的回答。

Answer 1

您需要使用局部變量，以便每個函數都具有與其他函數不同的變量。例如，更改此：

thisBlock = $("#heroBlock"); 
    maxWidth = 400; /*controls max width of the block*/ 
    minWidth = 100; /*controls min widht of the block*/ 

這樣：

var thisBlock = $("#heroBlock"); 
    var maxWidth = 400; /*controls max width of the block*/ 
    var minWidth = 100; /*controls min widht of the block*/ 

的var關鍵字限制變量的scope在其中它聲明的特定功能。