jquery – 单击并激活活动按钮
在jQuery中：
场景** – 我有四个具有hover效果的Div。 – 全部使用jquery动画移动backgroundPosition以显示hover状态。
问题** – 我想设置一个焦点或点击状态，这样一旦你点击一个按钮，它就会进一步激活背景位置以显示新状态。 如果点击任何其他按钮并删除当前的点击状态并开始在新选择的按钮上设置新的点击状态动画，我也希望按钮能够识别…？
我的努力** – 我做了一些编码，但似乎无法解决这个焦点状态，再次提前感谢!! ;）
HTML **
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; }); });
试试这个
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}) } }); });
你可以尝试这个： http ： //jsfiddle.net/Mxkga/1/
我做了什么 ：
- 检查项目hover，动画到第一个状态
- 将项目保持在第一状态，一旦项目容器未聚焦，将所有项目设置为正常状态
- 如果用户单击某个项目，则将项目设置为第二状态并将其他项目重置为正常状态。
这是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 }) }); });