HTML:

jQuery Effects FadeOut

• Effect 1
• Effect 2
• Effect 3

jQuery Effects FadeIn

• Effect 1
• Effect 2
• Effect 3

jQuery Effects FadeTo

• Effect 1
• Effect 2
• Effect 3

jQuery Effects FadeToggle

• Effect 1
• Effect 2
• Effect 3

CSS:

body {

background-color: black;

margin: 20px auto;

}

.container {

background-color: black;

border: 10px solid #4b2e83;

width: 1100px;

}

.panel {

margin: 20px auto;

width: 230px;

}

#uw{

background-color: #4b2e83;

color: white;

}

#uw-gold {

background-color: #b7a57a;

color: #4b2e83;

}

h3 {

text-align: center;

}

JS:

$(document).ready(function () {

$('li').css('margin', '10px');

$('li').attr('id', 'uw');

$('#p1 li').click(function () {

console.log("$(this):" + $(this));

$(this).fadeOut(2000, function () {

console.log("fadeout complete!")

});

});

});

fader.html Using the provided files for experimenting with panels of jQuery Effects, observe how the FadeOut works and then finish the panel for the other 3 fading effects 18b fader.css fader.js