1


0

JQUERY:アニメーションメニュータブのアクティブ状態の設定

マウスオーバーイベントとマウスアウトイベントでBG位置を設定するためにJQueryを使用するイメージスプライトがあります。 JQUERYを使用してアクティブ状態のBG位置を設定すると、カーソルがアクティブな「タブ」から離れるまで正常に動作し、マウスアウトイベントアニメーションが起動します。

私が欲しいのは、アクティブなタブのアニメーションを停止するが、アニメーション効果を他のタブで動作させ、別のタブがクリックされてアクティブ状態が現在のタブから新しいアクティブに削除されるようにするmouseClickイベントです' タブ。

  • JQuery *

$(function(){

 /* This script changes main nav links hover state*/

$('.navigation a')
 .css( {backgroundPosition: "-1px -120px"} )
 .mouseover(function(){
 $(this).stop().animate({backgroundPosition:"(-1px -240px)"}, {duration:400})
      })


 .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(-1px -120px)"}, {duration:400, complete:function (){
    $(this).css({backgroundPosition: "-1px -120px"})

   }})


  })

});

$(document).ready(function(){
$("a").click(function(){
$(this).css({backgroundPosition: "-1px -235px"});

});
});
  • HTML *


http://blackthorndesign.co.uk/cvc/ [ここまでに私が持っているものを見ることができます]

ご協力ありがとうございます

1 Answer


2


$("ul li").click(function(){
  $("ul li.active").removeClass('active');
  $(this).stop().addClass('active');
})