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

    }); 

});