Making something fade when document is ready

JavaScript
1

Basically as the title mentions, I want to make an HTML element (image) fade in and out when the page loads, I’m a beginner developer so bear with me, and I know I’m suppose to be using the .fadeIn() and .fadeOut() effect. (I’m wanting this to be done with jQuery)

2

Demo: http://jsfiddle.net/OMGCarlos/BvN9A/

Everything that is put inside of:


$(function(){
  //...stuff...
});

Is only run after the document is ready, and in fact, is a shorthand for writing: $(document).ready(function(){});

Ok. So now when you want to fade an element, you “find” that element using the jQuery selector: $(‘elementID’);
If you have an element <img id=“smiley” src=“link” /> then you grab that element with: $(‘#smiley’);

Notice that you use CSS selectors, ie $(‘.class’), $(‘#id’), $(‘element’)

Next, to actually fade the element. The Docs explain all the variations, but the simplest way is to do:


$(function(){
   $('#smiley').fadeOut(1000);
});

which would fade the smiley out in 1 second (1000 = 1 second)

3

What would be the function to make it fade in & out over and over?

4 

function loopAnim(obj, speed){
   obj.fadeIn(speed, function(){
      loopAnim($(this), speed);
   });
}

loopAnim($('#smiley'), 1000);
5

I’m sorry, but i can’t quite follow your example (developer newbie) but here is the code that I’m working with(perhaps you can modify it a bit):


$(window).load(function(){
   $('.glow').fadeOut(500);
   $('.glow').fadeIn(500);
});

the glow class is the image I’m working with.

6

You’re executing two opposite animation functions simultaneously, so it’s going to seem as though it’s not working. Try this:


$(function(){
  $('.glow').fadeOut(500, function(){
    $(this).fadeIn(500);
  });
});

Check out: http://api.jquery.com/fadeOut/

By using a callback function (which gets executed AFTER the animation is finished), your able to “string” animations together.

7

it did the same thing? Was I suppose to keep it within the <body>? or move it to <head>?

8

With very rare exceptions, ALL your javascript should go at the bottom of the page, just before </body>

9

how would I get the .fadeIn to go back to the .fadeOut effect to make it loop over and over? cause unless I’m doing something wrong (using your code directly though) it’s not looping at all…

10

DEMO: http://jsfiddle.net/OMGCarlos/pfE7u/1/

I made this demo for you. It should demonstrate everything I’ve tried to explain. You have to do what is called “recursion”, when a function calls itself. It’s a special type of loop.

11

Thank you so much! but now there is another problem… after a few seconds of looping, it disappears… like the css for the element style changes to display: none;

Why is that?

12

That’s strange. What browser are you on? I accidentally left that tab open and it’s been running fine ever since. Are you using the same code? If not post what you’ve got.

13

You might’ve misunderstood me (maybe); the jsFiddle code is still “blinking” but the code on my website is the one that disappears, and the only thing that I really changed was the HTML element; as it’s no longer a DIV but an image, oh and I’m using Google Chrome.

14

Never mind it’s working now for some reason, but thank you for all the help, i greatly appreciate it!