jQuery effects & animation

by Joshua McNeese

HTML

<div>
     <h2>Visibility</h2>

    <div class="target">Now you see me</div>
    <button class="show">Show</button>
    <button class="hide">Hide</button>
</div>
<div>
     <h2>Visibility - Speed</h2>

    <div class="target">Now you see me</div>
    <button class="show slow">Show slow</button>
    <button class="hide fast">Hide fast</button>
</div>
<div>
     <h2>Visibility - Toggle</h2>

    <div class="target">Now you see me</div>
    <button class="toggle">Toggle visibility</button>
    <button class="toggle fast">Toggle visibility fast</button>
    <button class="toggle slow">Toggle visibility slow</button>
</div>
<div>
     <h2>Fade</h2>

    <div class="target">Now you see me</div>
    <button class="show fade">Show</button>
    <button class="hide fade">Hide</button>
</div>
<div>
     <h2>Fade - Speed</h2>

    <div class="target">Now you see me</div>
    <button class="show fade slow">Show slow</button>
    <button class="hide fade fast">Hide fast</button>
</div>
<div>
     <h2>Fade - Toggle</h2>

    <div class="target">Now you see me</div>
    <button class="toggle fade">Toggle fade</button>
    <button class="toggle fade slow">Toggle fade slow</button>
    <button class="toggle fade fast">Toggle fade fast</button>
</div>
<div>
     <h2>Slide</h2>

    <div class="target">Now you see me</div>
    <button class="show slide">Show</button>
    <button class="hide slide">Hide</button>
</div>
<div>
     <h2>Slide - Speed</h2>

    <div class="target">Now you see me</div>
    <button class="show slide slow">Show slow</button>
    <button class="hide slide fast">Hide fast</button>
</div>
<div>
     <h2>Slide - Toggle</h2>

    <div class="target">Now you see me</div>
    <button class="toggle slide">Toggle slide</button>
    <button class="toggle slide slow">Toggle slide slow</button>
    <button class="toggle slide fast">Toggle slide fast</button>
</div>
<div>
     <h2>Animation</h2>

    <button class="animate pulsate">Pulsate start</button>
    <button...

CSS

div.target {
    border: 1px dotted red;
    padding: 10px;
}
button {
    margin-top: 2em;
}
button.animate {
    margin: 0 0 2em;
}

JavaScript

$(function () {

    var getSpeed = function ($el) {
        return $el.hasClass('slow') ? 'slow' : ($el.hasClass('fast') ? 'fast' : null);
    };

    var getEffect = function ($el) {
        return $el.hasClass('fade') ? 'fade' : ($el.hasClass('slide') ? 'slide' : null);
    };

    var pulsate = function ($el, to, from, duration) {
        $el.animate(to, duration, function () {
            pulsate($el, from, to, duration)
        });
    };

    $('button.show').click(function () {

        var $this = $(this),
            $target = $this.siblings('.target'),
            speed = getSpeed($this),
            effect = getEffect($this);

        switch (effect) {
            case 'fade':
                $target.fadeIn(speed);
                break;
            case 'slide':
                $target.slideDown(speed);
                break;
            default:
                $target.show(speed);
                break;
        }

    });

    $('button.hide').click(function () {

        var $this = $(this),
            $target = $this.siblings('.target'),
            speed = getSpeed($this),
            effect = getEffect($this);

        switch (effect) {
            case 'fade':
                $target.fadeOut(speed);
                break;
            case 'slide':
                $target.slideUp(speed);
                break;
            default:
                $target.hide(speed);
                break;
        }

    });

    $('button.toggle').click(function () {

        var $this = $(this),
            $target = $this.siblings('.target'),
            speed = getSpeed($this),
            effect = getEffect($this)
            delay = $this.hasClass('delay'),
            fn = effect ? effect + 'Toggle' : 'toggle';

        switch (effect) {
            case 'fade':
                $target.fadeToggle(speed);
                break;
            case 'slide':
                $target.fadeToggle(speed);
                break;
            default:
               ...