1 
<!-- 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 li a）和第二个函数（.onEarLink）。这不是我想要的。我想让三个函数调用不同的部分并控制它们自己的动画。我不明白为什么即使我指定了每个函数的不同名称，为什么第三个函数仍然覆盖第一个函数和第二个函数。

感谢大家的帮助。

添加 var 作品，感谢您的回答。但是，我也在 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;
      }
    );
})

谢谢大家的回答。

4

1 回答 1

5

您需要使用局部变量，以便每个函数都有与其他函数不同的变量。例如，改变这个：

    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关键字将变量的范围限制为声明它的特定函数。

于 2012-09-05T21:08:48.410 回答