fadein css change on hover

Question

there are 4 divs. All have background images, when you hover over div1, the script should change the background image in div 2, 3, 4. This should be animated (fadein?).

This is the code it got after hours of jquery "learning by doing" but i couldn't get jquery to animate it.

html:

<div class="categories" style="color:#ccc;">
            <div class="single_cat first"></div>
            <div class="single_cat second"></div>
            <div class="single_cat third"></div>
            <div class="single_cat fourth"></div>
        </div>

css:

    #tour .categories{
    width: 950px;
    height: 236px;
    background-color: #efefef;
    margin: 20px 0 0 0;
}

.single_cat {
    width: 236px;
    height: inherit;
    margin: 0 2px 0 0;
    float: left;
    background-color: #222;
    color: #fff;
}

.single_cat.fourth {
    width: 236px;
    height: inherit;
    margin: 0;
    float: left;
    background-color: #222;
}

.single_cat.first {
    background-image:url('/img/takethetour/r_text.png');
}

.single_cat.second {
    background-image:url('/img/takethetour/b_text.png');
}

.single_cat.third {
    background-image:url('/img/takethetour/c_text.png');
}

.single_cat.fourth {
    background-image:url('/img/takethetour/bou_text.png');
}

jquery (java):

$(".first").mouseover(function() {
    $(".second").css('background', 'url(/img/takethetour/r_2.png)');
    $(".third").css('background', 'url(/img/takethetour/r_3.png)');
    $(".fourth").css('background', 'url(/img/takethetour/r_4.png)');
  }).mouseout(function(){
    $(".second").css('background', 'url(/img/takethetour/b_text.png)');
    $(".third").css('background', 'url(/img/takethetour/c_text.png)');
    $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
  });
   $(".second").mouseover(function() {
      $(".first").css('background', 'url(/img/takethetour/b_2.png)');
      $(".third").css('background', 'url(/img/takethetour/b_3.png)');
      $(".fourth").css('background', 'url(/img/takethetour/b_4.png)');
    }).mouseout(function(){
      $(".first").css('background', 'url(/img/takethetour/r_text.png)');
      $(".third").css('background', 'url(/img/takethetour/c_text.png)');
      $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
    });
    $(".third").mouseover(function() {
        $(".first").css('background', 'url(/img/takethetour/c_2.png)');
        $(".second").css('background', 'url(/img/takethetour/c_3.png)');
        $(".fourth").css('background', 'url(/img/takethetour/c_4.png)');
      }).mouseout(function(){
        $(".first").css('background', 'url(/img/takethetour/r_text.png)');
        $(".second").css('background', 'url(/img/takethetour/b_text.png)');
        $(".fourth").css('background', 'url(/img/takethetour/bou_text.png)');
      });
      $(".fourth").mouseover(function() {
          $(".first").css('background', 'url(/img/takethetour/bou_2.png)');
          $(".third").css('background', 'url(/img/takethetour/bou_3.png)');
          $(".second").css('background', 'url(/img/takethetour/bou_4.png)');
        }).mouseout(function(){
          $(".first").css('background', 'url(/img/takethetour/r_text.png)');
          $(".third").css('background', 'url(/img/takethetour/c_text.png)');
          $(".second").css('background', 'url(/img/takethetour/b_text.png)');
        });

Answer 1

Background-Images cannot be animated. Only colors or other scalar values can be animated.

Answer 2

If you're looking for the non-hovered divs to fade out first, then fade back in with the new backgrounds, you'll need something like this:

  $(".first").mouseover(function() {
    $(".second").fadeOut('slow',function(){
         $(this).css('background', 'url(/img/takethetour/r_2.png)').fadeIn('slow');
  });

Answer 3

If you need the background images to fade directly from one to the other, you could try nesting one div inside the other for the background. Set the inner div's background to the default background, and the outer div's background to the hovered one. Then, you could fade the inner div in and out.

Remember that you won't want to place any content in the inner background div since it will fade out (unless that's what you want) - you'll want another sibling div to contain the content. It might take a bit of CSS to position everything correctly, depending on how you've got your page laid out.

This is the basic idea for one of them, but remember that you'll probably need to work with the positioning and sizing of the divs so that they overlap properly.

<div class="div1outer">           <!-- has one background -->
  <div class="div1bg"></div>      <!-- has the other background -->
  <div class="div1content"></div> <!-- has the content -->
</div>

Answer 4

Another approach could be to have them as img's and style them with lower z-index, to layer them behind your other content. That can create the same effect as having them as "backgrounds" without having the restrictions of being backgrounds - eg. they can now be animated using jquery fadeIn. Kinda hacky, but gets the job done.