jQuery - fadeIn -fadeOut -fadeToggle and fadeTo
HTML
<p><button id="in">fadeIn()</button>
<button id="out">fadeOut()</button>
<button id="toggle">fadeToggle()</button>
<button id="to">fadeTo()</button></p>
<div id="test"></div>
CSS
#test {
margin: 3em auto;
width: 15em;
height: 3em;
background: blue;
}
JavaScript
var test = $('#test'),
$in = $('#in'),
out = $('#out'),
toggle = $('#toggle'),
to = $('#to');
$in.click(function() {
test.fadeIn(1000, function() {
});
});
out.click(function() {
test.fadeOut(1000, function() {
});
});
toggle.click(function() {
test.fadeToggle(5000, function() {
});
});
to.click(function() {
test.fadeTo(1000, 0.1, function() {
});
});