jQuery animation state

by Timmy Willison

HTML

<script>
    var old$ = jQuery.noConflict();
</script>
<script src="http://dl.dropbox.com/u/6407061/jQuery/8685/jquery.js"></script>
<section id="wrapper">
    <p>Atomic click these</p>
    <button id="btn-slide-old">old slideToggle</button>
    <button id="btn-slide-old-stop">old slideToggle /w stop</button>
    <button id="btn-slide-old-stop-true">old slideToggle /w stop(true,true)</button>
    <button id="btn-reset">reset</button>
    <button id="btn-slide">new slideToggle /w stop</button>
    <div></div>
    <button id="btn-fade">new fadeToggle /w stop</button>
    <div></div>
</section>

CSS

div, span {
    display: block;
    background: #ccc;
    height: 200px;
    width: 300px;
    margin: 20px 0;
}
p {
    margin-bottom: 20px;
}
#btn-fade {
    display: block;
}
button {
    margin-bottom: 5px;
}

#wrapper {
    width: 470px;
    position: relative;
    margin: 0 auto;
}

JavaScript

var $oldDS = old$('div').first(),
    $newDS = $('div').first(),
    $newDF = $('div').eq(1);

// Old
$('#btn-slide-old').click(function() {
    $oldDS.slideToggle(1000);
});

$('#btn-slide-old-stop').click(function() {
    $oldDS.stop().slideToggle(1000);
});

$('#btn-slide-old-stop-true').click(function() {
    $oldDS.stop(true, true).slideToggle(1000);
});

$('#btn-reset').click(function() {
    $oldDS.css({ 'overflow': '', height: '', margin: '', padding: '' });
});


// New
$('#btn-slide').click(function() {
    $newDS.stop().slideToggle(1000);
});

$('#btn-fade').click(function() {
    $newDF.stop().fadeToggle(1000);
});