Best jquery script for fade in and out ?

Hi guys ,

I need a super light jquery plugins to do a fade in and fade out effect on a div.

I know that cycle is good but is there something better ?

Thanks guys !

Why don’t you do it using native jQuery?

Why don’t you do it using native jQuery?

You will have to explain that to me , I have 0 knowledge in javascript.

Do you mean , making a custom script ?

Check this for some samples:

http://www.gowestwebdesign.com/demos/jquery-effects-1/

It’s really easy, a plugin for a simple fade in and fade out is a bit overkill.

Check this for some samples:

http://www.gowestwebdesign.com/demos/jquery-effects-1/

It’s really easy, a plugin for a simple fade in and fade out is a bit overkill.

Hmm , I’m sure it’s really easy but I don’t unerstand a thing

Your best bet is just native jQuery.

What exactly are you trying to do? As an example, the following will fade in a div#fade when a#active is clicked:

$(function() {

  $('a#active').click(function() {

    $('div#fade').fadeIn();    

  });

});

Check out the first few episodes of Jeffrey’s jQuery for Absolute Beginners – they’re only 5-10mins each

Check this for some samples:

http://www.gowestwebdesign.com/demos/jquery-effects-1/

It’s really easy, a plugin for a simple fade in and fade out is a bit overkill.

Hmm , I’m sure it’s really easy but I don’t unerstand a thing

Don’t worry, let me try to explain the Fade in/Fade out example:

If you check the source code for that demo page, you’ll notice they have a fieldset containing some ‘buttons’ (in reality those are divs, but act like buttons).

The fieldset also contains another div called “mover”.

To be able to use the fade in/fade out effect on the “mover” div, whenever the corresponding ‘button’ is triggered (which is named Fade in and out with speed of ‘slow’)

you need to include the jquery library in the header of the file and then call this script:

< script type=”text/javascript” >

// initialize the jquery code $(document).ready(function(){

//close all the content divs on page load $(’.mover’).hide();

// fade in and out $(’#fadeInOut’).toggle(function() { $(this).siblings(’.mover’).fadeIn(‘slow’); }, function() { $(this).siblings(’.mover’).fadeOut(‘slow’); });

}); < /script >

The ready() method tells the browser to run the code only after the dom loaded.

The hide() method hides the div with class “mover”

The toggle() method applies the 1st function given as parameter the first time the button is clicked, and the 2nd function and the 2nd click, repetitively. It…’toggles’ things

So basically, the 1st time you click on the Fade in and out with speed of ‘slow’ , the “mover” div is fadedIn, and the next time you click on it, the “mover” div is fadedOut.

jQuery, or at least the basics such as calling methods etc – very easy/logical to learn.

You’re probably overwhelmed because it’s new to you, but I say, give it an afternoon or two and you’ll feel much more comfortable with it.

Wow thanks so much !

In fact , the thing I want to do is really simple. I finished coding the first pages of my new theme : http://s3.envato.com/files/174520/2_nova-home.jpg

I want the left item (image + description + visit the site button) to fade out and another item fade in .. 2-3 times .. I know how to do it with cycle but I am sure there is an easy way to do it with native Jquery.

I’ll take a look at jeffrey’s tutorials , i’m sure ill find my answer there

innerfade is pretty easy to use. I use it on the St Thomas Curling Club website to fade in and out images of curlers on the home page. google search will reveal the details I used.

ref: http://medienfreunde.com/lab/innerfade/

building your own plugin is an option if you know jQuery, otherwise not.

sounds like you need to go through the jquery for beginners series that Jeff Way has written on the TF blog. it is a good introduction series.

Al

Thanks Al , I’m pretty sure that will do the trick