jQuery: the fadeIn(), fadeOut(), fadeToggle() and fadeTo() methods

by 1eddy87

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: 1.5em auto;
    width: 10em;
    height: 10em;
    background: gray;
}

JavaScript

var test = $('#test'),
    $in = $('#in'),
    out = $('#out'),
    toggle = $('#toggle'),
    to = $('#to');


$in.click(function() {
    test.fadeIn(1000, function() {
        alert('Complete');
    });
});
    
    
out.click(function() {
    test.fadeOut(1000, function() {
        alert('Complete');
    });
});


toggle.click(function() {
    test.fadeToggle(1000, function() {
        $('#toggle').addClass('why');
    });
});

to.click(function() {
    test.fadeTo(1000, 0.5, function() {
        alert('Complete');
    });
});