jquery - click & activate active button

Question

In jQuery:

Scenario ** - I have four Divs that have hover effects. - All use a jquery animation to move the backgroundPosition to show the hover state.

Problem ** - I want to set a focus or clicked state, so that once you have clicked on a button it animates the background position even further to show the new state. I would also like the buttons to be aware if any other buttons have been clicked and remove the current click state and begin to animate the new click state on the new selected button ...??

My efforts ** - I have done a bit of the coding but cant seem to work out this focus state, thanks again in advance !! ;)

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

Try this

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

You can try this: http://jsfiddle.net/Mxkga/1/

What I have done :

• Check on item hover, animate to first state
• Keep items on first state , once item container is not focused, set all items to normal state
• If user clicked an item, set item to second state and reset other items to normal state.

Here is the jquery (see above link for working example):

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

    });

});