Promised Animations

Using jQuery promises to synchronize animations

by Steven Senkus

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js"></script>
<div id="featured">
    <div class="click">
        <!-- This makes the whole thing clickable --> <a href="http://www.graphicproducts.com/label-printers/duralabel-catalyst/"> </a>

        <div id="question">Looking for your next labeling solution?</div>
        <!--END question-->
        <div id="productinfo">
            <p class="productname">DuraLabel Catalyst</p>
            <p class="benefits">offers easy full color printing
                <br />for GHS labeling.</p>
        </div>
        <!--END productinfo-->
    </div>
    <!--END click--> <a class="btn btn-primary btn-large form_pop learnmore" href="http://www.graphicproducts.com/label-printers/duralabel-catalyst/"><i class="icon-infoBtn"></i>Learn More</a>

</div>
<!--END featured-->

CSS

#featured {
    width:980px;
    height:200px;
    background:#999;
    display:block;
    background:url(swooshbg.png) bottom center no-repeat #e4e4e4;
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    opacity:0;
}
#question {
    font-family:"Dosis", "Gudea", sans-serif;
    color:#303030;
    font-size:24px;
    position:relative;
    left: -360px;
    /*left:90px; This is what it will animate to on load*/
    top:20px;
    display:inline-block;
    z-index:3;
}
div.click {
    position:relative;
}
div.click a {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    text-decoration:none;
    /* Makes sure the link   doesn't get underlined */
    z-index:10;
    /* raises anchor tag above everything else in div */
    background-color:white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=1);
    /*workaround to make clickable in IE */
}
#productinfo {
    width:980px;
    height:200px;
    background: url(catalyst.png) 0px 0px no-repeat;
    display:inline-block;
    position:relative;
    top:-18px;
    z-index:1;
    opacity:0;
}
.productname {
    font-weight: bold;
    color:#fc6315;
    font-size:30px;
    font-family: Arial, Helvetica, sans-serif;
    width:300px;
    display:block;
    margin-bottom: 14px;
    position:relative;
    z-index:5;
    left: 300px;
    top:50px;
}
.benefits {
    font-family:"Dosis", "Gudea", sans-serif;
    color:#303030;
    font-size:24px;
    line-height: 26px;
    text-align:right;
    width:300px;
    position:relative;
    z-index:4;
    left:368px;
    top:45px;
}
.learnmore {
    position:relative;
    top: -126px;
    left:90px;
    display:inline-block;
    z-index:6;
    opacity:0;
    font-size: 1.7em;
    padding: 8px 6px 4px;
    color: #ffffff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 4px -4px #303030;
    background-color: #fd7800;
   ...

JavaScript

$(document).ready(function () {

    var def0 = new $.Deferred();
    var def1 = new $.Deferred();
    $('#featured').animate({
        opacity: 1
    }, 500, function () {
        def0.resolve();
    });

    $.when(def0).then(function () {

        $('#question').animate({
            left: 90
        }, 200);
        $('#productinfo').delay(1000).animate({
            opacity: 1
        }, 600, function () {
            def1.resolve();
        });
    });

    $.when(def1).then(function () {
        $(".learnmore").transition({
            opacity: 1,
            duration: 1000,
            scale: [1.0, 1.0]
        });
    });

});