Rewinding Animation - Module

by OmShiv

HTML

<div id="wrapper">
        <div class="scene scene-a">
            <div class="item" id="car">
                <img alt="car" id="car-img" src="http://i47.tinypic.com/2wh0dqo.png"/>
            </div>
            <div class="item" id="wall">
                <img alt="wall" id="wall-img" src="http://i48.tinypic.com/20qe0k6.png"/>
            </div>
    </div>

        <div class="scene scene-b">
            <div class="item" id="bang">
                <img alt="bang" id="bang-img" src="http://i50.tinypic.com/20tromb.png"/>
            </div>
        </div>
    </div>

    <div id="control" >
        <input type="button" class="btn" id="btn-start" value="Start" />
        <input type="button" class="btn" id="btn-stop" value="Stop" disabled="disabled" />
        <input type="button" class="btn" id="btn-rew" value="Rewind" />
    </div>

    <div class="info">
        Can't see the images? Open these images separately in new tabs:
        	<a target="_blank" href="http://i47.tinypic.com/2wh0dqo.png">One</a>, <a target="_blank" href="http://i48.tinypic.com/20qe0k6.png">Two</a> and <a target="_blank" href="http://i50.tinypic.com/20tromb.png">Three</a>. And then reload this fiddle -- Its a common JSfiddle problem
    </div>

CSS

div, img {
    margin: 0;
    padding: 0;
    border: none;
}

body { font-size: 10px; }

#wrapper, #control {
    width: 600px;
    margin: 10px auto 10px;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;
    box-shadow: 0 0 10px #999;
}

#control {
    margin-top: 5px;
}
.item {
    display: inline-block;
    float: left;
}

.scene-a { height: 412px; }

.scene-a .item {
    height: 128px;
    margin-top: 138px;
}

.scene-b {
    width: 600px;
    height: 412px;
    display: none;
}

#car { width: 468px; }
#wall { width: 128px; }

#car-img {
    position: relative;
    left: 0;
}

#bang {
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
}

#bang-img {
    width: 50%;
    height: auto;
    margin: 70px auto;
    display: block;
}


.btn {
    text-decoration: none;
    border-radius: 2px;
    -webkit-user-select: none;
    cursor: pointer;
    border: 1px solid #707070;
    color: #222;
    padding: 5px 10px;
    background: -moz-linear-gradient(top, #BFE6F5, #9AB8E6);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFE6F5), to(#9AB8E6));
}

.btn:hover {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DFEDF1), to(#A1B7D8));
}

.btn:active, .btn.on, .btn.selected {
    box-shadow: inset 0 1px 10px rgba(34, 37, 66, 0.34);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(131, 201, 228)), to(rgb(127, 163, 218)));
}

.btn[disabled] {
    background: #e1e1e1 !important;
}

.info {
    width: 600px;
    margin: 10px auto 10px;
    font-size: 14px;
    padding: 20px;
    color: brown;
}

JavaScript

(function() {

// Simple module with everything public

return MyApplication = {

    // Dom Elems

    car: $('#car-img'),
    bang: $('#bang-img'),
    sceneA: $('.scene-a'),
    sceneB: $('.scene-b'),
    startBtn: $('#btn-start'),
    stopBtn: $('#btn-stop'),
    revBtn: $('#btn-rew'),

    // States

    animationStopped: true,
    direction: 'forward',
    itemAnimating: this.car,
    itemAnimKey: 'car',

    animationMapFW: {
        'car': 'animateCarFW',
        'bang': 'animateBangFW'
    },

    animationMapRW: {
        'car': 'animateCarRW',
        'bang': 'animateBangRW'
    },

    // Methods

    animateCarFW: function() {
        var self = this;

        this.itemAnimating = this.car;
        this.itemAnimKey = 'car';

        this.car.animate({
            left: '340px'
        }, 2000, function() {
            self.sceneA.hide();
            self.sceneB.show();
            self.animateBangFW();
        });
    },


    animateBangFW: function() {
        var self = this;

        this.itemAnimating = this.bang;
        this.itemAnimKey = 'bang';
        this.bang.animate({
            width: '100%',
            margin: '0'
        }, 2000, function(){
            self.startBtn.prop('disabled', true);
            self.stopBtn.prop('disabled', true);
        });
    },

    animateBangRW: function() {
        var self = this;

        this.itemAnimating = this.bang;
        this.itemAnimKey = 'bang';

        this.bang.animate({
            width: '50%',
            margin: '70px auto'
        }, 2000, function() {
            self.sceneB.hide();
            self.sceneA.show();
            self.animateCarRW();
        });
    },

    animateCarRW: function() {
        var self = this;

        this.itemAnimating = this.car;
        this.itemAnimKey = 'car';
        this.car.animate({
            left: '0'
        }, 2000, function() {
            self.direction = 'forward';
            self.stopBtn.prop('disabled', true);
           ...