Home/ Questions/Q 6208261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T05:46:44+00:00

In jQuery: Scenario ** – I have four Divs that have hover effects. –

  • 0

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

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

});
    • 0