How do I run animate() once the page has loaded?

Question

I have a menu item that is animated in the following fiddle by clicking a link, but I actually want the background color fade animation to start once the page has loaded (without the need to click a link). How do I change the code in the following fiddle to animate once the page has loaded?

The code I have currently is:

$("a").click(function(e) { 
  e.preventDefault();
  for (var i = 0; i < 2; i++ ) {
    $("#menu-item-9032 a")
      .animate( { backgroundColor: "#00afee", color: "#363a47" }, 2000 )
      .animate( { backgroundColor: "transparent", color: "#363a47" }, 2000 );
  }
});

http://jsfiddle.net/Fe8Jy/500/

If I replace $("a").click(function(e) { with $(document).ready(function() { nothing happens, what am I doing wrong?

Have you checked the browser console for errors? If you left the first line of the function unchanged, then it's probably complaining that there is no `e` that you could call any methods on ... — CBroe, Aug 10 '16 at 22:39
Thanks everyone. yes removing that preventdefault does the trick - thanks! And yes it's a pulse effect. — Metzed, Aug 10 '16 at 22:47

score 1 · Accepted Answer · answered Aug 10 '16 at 22:41

1

You must have created a syntax error. Code works fine with jQuery's ready:

http://jsfiddle.net/tks2sobo/

$(function() {

    for (var i = 0; i < 2; i++ ) {
        $("#menu-item-9032 a")
            .animate( { backgroundColor: "#00afee", color: "#363a47" }, 2000 )
            .animate( { backgroundColor: "transparent", color: "#363a47" }, 2000 );
    }
});

answered Aug 10 '16 at 22:41

mpen

272,448
266
850
1,236

Any ideas why the background color it fades to seems to be white, when it should be transparent? – Metzed Aug 10 '16 at 22:49
@Metzed Not sure... I guess jQuery animate doesn't properly support `transparent`? You can try with `rgba` or you can put the text into a different element and fade with `opacity`. – mpen Aug 10 '16 at 23:13
thanks. The original answer worked well thank you and thanks so much for posting that CSS3 solution. I've now used that instead. – Metzed Aug 11 '16 at 14:16

How do I run animate() once the page has loaded?

1 Answers1