Question

This is probably blatantly simple and easy to fix (or impossible) but I’ve been trying to implement my hover effect on page load.

I have a navigation system with div boxes, and the following jQuery to animate it’s background color on hover:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>


<script type="text/javascript">
var $jq = jQuery.noConflict();  
/* Menu buttons fade */
      $jq(document).ready(function() {
                $jq("#box").hover(function() {
                $jq(this).stop().animate({ backgroundColor: "#FF9933"}, 400);
                },function() {
                $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
                });

      $jq("#box2").hover(function() {
                $jq(this).stop().animate({ backgroundColor: "#9DE263"}, 400);
                },function() {
                $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
                });

      $jq("#box3").hover(function() {
                $jq(this).stop().animate({ backgroundColor: "#0099FF"}, 400);
                },function() {
                $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
                });

      $jq("#box4").hover(function() {
                $jq(this).stop().animate({ backgroundColor: "#8B0099"}, 400);
                },function() {
                $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
                });

      $jq("#box5").hover(function() {
                $jq(this).stop().animate({ backgroundColor: "#336666"}, 400);
                },function() {
                $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
                });
      });
</script>

What I’m trying to do however, is duplicate the same effect, however instead it occurs when the page loads – with one animating just after the other. A good example is css-tricks – the navigation bar buttons color animate one after the other.

Can anyone help me out?

Thanks!

mlazim14

Answer 1

Maybe something like this is what your looking for:

var $jq = jQuery.noConflict();

$jq(document).ready(function() {
    var colors = ["", "#FF9933", "#9DE263", "#0099FF", "#8B0099", "#336666"];

    $jq("[id^='box']").hover(function() {
       $jq(this).stop().animate({ backgroundColor: colors[this.id.replace('box','')]}, 400);
    },function() {
       $jq(this).stop().animate({ backgroundColor: "navy" }, 400);
    });
});

FIDDLE

Note that color animations like these require jQuery UI or preferably just the much smaller color animation script.

EDIT: to make the boxes animate on load, do something like this:

$jq("[id^='box']").each(function() {
      $jq(this).stop().delay(time).animate({ backgroundColor: colors[this.id.replace('box','')]}, speed, function() {
          $jq(this).stop().animate({ backgroundColor: "navy" }, speed);
      });
      time=time+(speed*2);
});

FIDDLE