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 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;
      }
    );
})

感谢大家的回答。

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限制为声明它的特定函数。

如何使Javascript不覆盖以前的功能？

1 个答案: