1713 posts
Exclusive Author Item was Featured Author was Featured Author had a Free File of the Month Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items Canada
DDStudios says

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 !

Posted 6 months ago Report | Permalink
225 posts
Exclusive Author Referred at least one person Sold between 100 and 1 000 dollars Bought between 10 and 49 items
dracano says

Why don’t you do it using native jQuery?

Posted 6 months ago Report | Permalink
1713 posts
Exclusive Author Item was Featured Author was Featured Author had a Free File of the Month Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items Canada
DDStudios says
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 ?

Posted 6 months ago Report | Permalink
352 posts
Exclusive Author Item was Featured Author was Featured Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items
octofine says

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.

Posted 6 months ago Report | Permalink
1713 posts
Exclusive Author Item was Featured Author was Featured Author had a Free File of the Month Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items Canada
DDStudios says
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 :(

Posted 6 months ago Report | Permalink
347 posts
Exclusive Author Author was Featured Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items United Kingdom
danharper says

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 :)

Posted 6 months ago Report | Permalink
352 posts
Exclusive Author Item was Featured Author was Featured Sold between 10 000 and 50 000 dollars Bought between 1 and 9 items
octofine says
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.

Posted 6 months ago Report | Permalink
1713 posts
Exclusive Author Item was Featured Author was Featured Author had a Free File of the Month Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items Canada
DDStudios says

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 :)

Posted 6 months ago Report | Permalink
160 posts
Bought between 1 and 9 items
al_m473 says

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

Posted 6 months ago Report | Permalink
1713 posts
Exclusive Author Item was Featured Author was Featured Author had a Free File of the Month Referred at least one person Sold between 10 000 and 50 000 dollars Bought between 10 and 49 items Canada
DDStudios says

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

Posted 6 months ago Report | Permalink