jQuery Fade Through Plugin Demos

Demo 1

This is Panel #1
these panels change every 3 seconds by default.
interval: 3000

This is Panel #2
the fade animation takes 500 miliseconds.
fadeduration: 500

This is Panel #3
the height of the parent element fits to the content.
this animation takes 500 miliseconds.
heightduration: 500, animatestartheight: false

This is Panel #4
the fades starts by default on document loaded.
autostart: true

This is Panel #5
the child identifier is the class ".item".
childIdentifier: '.item'

Demo 2

  • This is Listitem #1
    $('#demo2').fadeThrough({
    interval: 5000,
    fadeduration: 1000,
    heightduration: 300,
    animatestartheight: true,
    autostart: true,
    childIdentifier: 'li'
    });
  • This is Listitem #2
  • This is Listitem #3
  • This is Listitem #4
  • This is Listitem #5

Demo 3

This is Panel #1
autostart: false
start Fader here!

This is Panel #2
use jQuery('#demo3').fadeThrough('start'); to start the fader.

This is Panel #3
Stop Fader!

This is Panel #4
use jQuery('#demo3').fadeThrough('stop'); to top the fader.

start Fader (Demo #3) here!
stop Fader (Demo #3) here!