jQuery的 - 點擊並激活激活鍵

Question

在jQuery中：

方案** - 我有懸停有對4周的div。 - 全部使用jQuery動畫來移動backgroundPosition以顯示懸停狀態。

問題** - 我想成立一​​個焦點或點擊的狀態，所以，一旦你點擊了一個按鈕，它的動畫背景的位置進一步以顯示新的狀態。我還想讓按鈕知道是否有任何其他按鈕已被點擊並移除當前點擊狀態並開始在新選定按鈕上設置新的點擊狀態動畫......？

我的努力** - 我已經提前再次做了一些編碼，但不能似乎摸出這個焦點狀態，謝謝！ ）

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的**

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

你可以試試這個：http://jsfiddle.net/Mxkga/1/

我做了什麼：

• 檢查項目懸停，動畫到第一狀態
• 保留項目上第一個狀態，一旦物品容器未聚焦，將所有物品設置爲 即可te
• 如果用戶點擊某個項目，將項目設置爲第二狀態並將其他 項目重置爲正常狀態。

這裏是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 
     }) 

    }); 

});