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

私の問題は、3 番目の関数 (.overEarLink) が最初の関数 (#inEar ul li a) と 2 番目の関数 (.onEarLink) を上書きし続けることです。これは私が望むものではありません。3 つの関数呼び出しを別のパーツにして、独自のアニメーションを制御したいと考えています。関数ごとに異なる名前を指定したにもかかわらず、なぜ 3 番目の関数が 1 番目の関数と 2 番目の関数を上書きするのかがわかりませんでした。

みんなの助けに感謝します。

var の追加は機能します。ご回答いただきありがとうございます。ただし、maxWidth と minWidth にも var を使用しました。ただし、同じことが起こり、3 番目の var が最初の var と 2 番目の 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 に答える