ThemeForest

Best jquery script for fade in and out ?

2942 posts
  • Has been a member for 3-4 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 100 and 499 items
  • Australia
  • Referred between 200 and 499 users
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 !

3 years ago
374 posts
  • Has been a member for 2-3 years
  • Contributed a Tutorial to a Tuts+ Site
  • Contributed a Blog Post
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
_rohan says

Why don’t you do it using native jQuery?

3 years ago
2942 posts
  • Has been a member for 3-4 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 100 and 499 items
  • Australia
  • Referred between 200 and 499 users
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 ?

3 years ago
406 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Europe
osigrandi 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.

3 years ago
2942 posts
  • Has been a member for 3-4 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 100 and 499 items
  • Australia
  • Referred between 200 and 499 users
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 :(

3 years ago
352 posts
  • Has been a member for 3-4 years
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • United Kingdom
  • Referred between 50 and 99 users
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 :)

3 years ago
406 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Europe
osigrandi 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.

3 years ago
2942 posts
  • Has been a member for 3-4 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 100 and 499 items
  • Australia
  • Referred between 200 and 499 users
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 :)

3 years ago
320 posts
  • Has been a member for 3-4 years
  • 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

3 years ago
2942 posts
  • Has been a member for 3-4 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Contributed a Blog Post
  • Author had a File in an Envato Bundle
  • Author had a Free File of the Month
  • Exclusive Author
  • Sold between 100 000 and 250 000 dollars
  • Elite Author
  • Bought between 100 and 499 items
  • Australia
  • Referred between 200 and 499 users
DDStudios says

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

3 years ago
by
by
by
by
by