jqueryの - クリック＆jQueryのではアクティブなボタン

Question

をアクティブ化：

シナリオ** - 私はホバー効果を持つ4つのdivを持っています。 - すべてjqueryアニメーションを使用して、背景位置を移動してホバー状態を表示します。 **

問題 - 私はフォーカスを設定する場合、またはあなたはそれが新しい状態を示すために、さらに背景の位置をアニメーション化ボタンをクリックするとなるように、状態をクリックしました。他のボタンがクリックされて現在のクリック状態が取り除かれ、新しい選択状態で新しいクリック状態がアニメートされ始めると、ボタンが認識されるようにしたいと思います。

私の努力** は - 事前に再び、おかげで私は、コードのビットを行っているが、カントは、このフォーカス状態をうまくするように見えます！ ;）

HTML **

<div class="rollOversHolderOne"> 

    <div id="mainServices_01" class="rollOver_1 rollover"></div> 

     <div id="mainServices_02" class="rollOver_2 rollover"></div> 

     <div id="mainServices_03" class="rollOver_3 rollover"></div> 

     <div id="mainServices_04" class="rollOver_4 rollover"></div> 

</div> 

CSS **

#mainServices_01 { 
    width:103px; 
    height:131px; 
    float:left; 
    background:url(../images/slideHover.png) repeat 0 0; 
    background-position: inline; 
} 
#mainServices_02 { 
    width:103px; 
    height:131px; 
    float:left; 
    background:url(../images/slideHover.png) repeat 0 0; 
    background-position: inline; 
} 
#mainServices_03 { 
    width:103px; 
    height:131px; 
    float:left; 
    background:url(../images/slideHover.png) repeat 0 0; 
    background-position: inline; 
} 
#mainServices_04 { 
    width:103px; 
    height:131px; 
    float:left; 
    background:url(../images/slideHover.png) repeat 0 0; 
    background-position: inline; 
} 

のjQuery **

私がやっていることhttp://jsfiddle.net/Mxkga/1/

：

jQuery(document).ready(function(){ 

    var flag; 
    var active; 

    jQuery('.rollover').css({backgroundPosition: "0 0"}).click(function(){ 

     flag = false; 

     jQuery(this).stop().animate(
      {backgroundPosition:"(0 -130.5px)"}, 
      {duration:1}); 

    }); 


    jQuery('.rollover').mouseout(function(){ 

     if(flag == false) 
     { 
      jQuery(this).stop().animate(
      {backgroundPosition:"(0 -130.5px)"}, 
      {duration:1}) 
     }else{ 
      jQuery(this).stop().animate(
      {backgroundPosition:"(0 0)"}, 
      {duration:1}) 
     } 
    }); 


    jQuery('.rollover').mouseover(function(){ 

      jQuery(this).stop().animate(
      {backgroundPosition:"(0 -130.5px)"}, 
      {duration:1}) 
      flag = true; 
    }); 

}); 

Answer 1

あなたはこれを試すことができ、この

jQuery(document).ready(function(){ 

    var flag; 
    var $active = null; 

    jQuery('.rollover').css({backgroundPosition: "0 0"}).click(function(){ 

     if($active && ($active.index() == jQuery(this).index())) 
      return; 

     if($active){ 
      $active.stop().animate(
      {backgroundPosition:"(0 0)"}, 
      {duration:1}) 
     } 

     $active = $(this); 

     jQuery(this).addClass("clicked").stop().animate(
      {backgroundPosition:"(0 -280px)"}, 
      {duration:1}); 

    }).mouseout(function(){ 

    if(!$active || ($active && ($active.index() != jQuery(this).index()))){ 
     jQuery(this).stop().animate(
     {backgroundPosition:"(0 0)"}, 
     {duration:1}) 
    } 

    }).mouseover(function(){ 

     if(!$active || ($active && ($active.index() != jQuery(this).index()))){ 
     jQuery(this).stop().animate(
     {backgroundPosition:"(0 -130.5px)"}, 
     {duration:1}) 
     } 
}); 

}); 

Answer 2

を試してみてくださいアイテムホバー上

• チェック、
• 第1の状態にアニメーションの項目をキープ最初の状態、一度アイテムコンテナがフォーカスされていなければ、 すべてのアイテムを通常のstaに設定しますte
• アイテムをクリックした場合は、アイテムを第2の状態に設定し、他の アイテムを通常の状態にリセットします。ここで

はjqueryのは、（実施例については上記のリンクをご覧ください）です。

jQuery(document).ready(function() { 


    jQuery('.rollover').css({ 
     backgroundPosition: "0 0" 
    }).click(function() { 

     //Reset and remove class activeClicked 
     jQuery('.rollover').animate({ 
      backgroundPosition: "(0 0)" 
     }, { 
      duration: 500 
     }); 
     jQuery('.rollover').removeClass('activeClicked'); 

     //Set new animate second state for clicked and add class 
     jQuery(this).stop().animate({ 
      backgroundPosition: "(0 -500px)" 
     }, { 
      duration: 500 
     }); 
     jQuery(this).addClass('activeClicked'); 
    }); 

    //Check when item container is not user's focus anymore, and reset all 
    jQuery('.rollOversHolderOne').mouseleave(function() { 

     jQuery('.rollover').stop().animate({ 
      backgroundPosition: "(0 0)" 
     }, { 
      duration: 500 
     }) 

    }); 

    //If user enters an item, animate background to first state 
    jQuery('.rollover').mouseenter(function() { 

     jQuery(this).stop().animate({ 
      backgroundPosition: "(0 -130.5px)" 
     }, { 
      duration: 500 
     }) 

    }); 

});