jQuery Fade In, Fade Out

My third jQuery tutorial. This time I show you how to use the jQuery fadeIn and fadeOut functions.

You can download the code here: http://www.quickit.net.au/tutorials/files/fades/jquery.zip

Category:

Howto & Style

Tags:

• fadein
• fadeout
• jquery
• screencast
• tutorial

[EMHmark7]

Good thing to remember for beginners!

If I don't count a missing slash in a />, I spent time comparing your functions file with mine, because with yours it was working. I found! fadeIn(1000) and fadeOut(1000) are really case sensitive! I suppose same thing for all methods.

Now it works! Thanks for your help.

[BronsonQuick]

Ahh yep. It's always good to run your code through the W3C HTML validator to pick up on missing tags hehe! I also don't think I mentioned in any of the videos that jQuery is case sensitive! I should definitely make mention of that in future videos!

[EMHmark7]

I am a beginner. For me it does not work. Video quality too bad so I need to guess some characters. Any place to dnload these lines?

I want to be able to rollover a series of buttons, so some HTML will swap crossfading in the same area. Help more than welcome. Thanks.

[BronsonQuick]

Hey EMHmark7,

I've just typed out the code for you this morning. I've added a link to the download in the video's information.

You will notice that I'm using jQuery 1.4.2 in that zip as that's the latest version. I'm actually in the process of turning the URL in the link into a knowledge base over the next couple of weeks and I'll be adding a lot more video tutes. If you start coding up your rollover buttons I'll be more than happy to help you out!

[Mrpulkitvmehta14]

hi , i want to make it perform both functions with the click of a single button , like

when i click the button it should first fade out the content then fade the new content in,

pls some know how to do it send me a pm or comment the answer here, who ever answers first the right answer that i am looking for i promise them 3 subscribers !

[baseball4355]

i went to that extension website and got 2000 threats from it on norton 0.o

[ClevvaChevva]

Dogs AND birds this time - love it.

[rahj8786]

hello bro! can you make a jquery slider?

[IvicaM1]

I make a website and I have menu items. When you open the index file there is a div which is hidden and with this code the div fade in and shows. I put the same code on the other pages it doesn't work. I check the id of the div everythig is ok. Here is the code:

$(window).load(function() { $("#background_image").fadeIn(­4000);

});

This works only when the index page loads on the others doesn't work.

Please help! Thanks! :)

[PinkLederhosen]

The breastfeeding videos are a little distracting over on the right.