Question

在jQuery中：

情景** - 我有四个有悬停效果的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/

我做了什么：

检查项目悬停，动画到第一个状态
将项目置于第一个状态，一旦项目容器未聚焦，设置所有项目都处于正常状态
如果用户点击了某个项目，请将项目设置为第二个状态并重置其他状态物品处于正常状态。

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

    });

});

jquery - 点击＆amp;激活活动按钮

2 个答案: