Basic animations

by austegard

HTML

<script src="http://s3.austegard.com/ais/2011HolidayCard/jquery.transition.min.js"></script>
<div id="top" class="frame"></div>
<div id="left" class="frame"></div>
<div id="main">
    <div id="slides" nowrap="nowrap">
        <img id="first" src="http://s3.austegard.com/ais/2011HolidayCard/AIS-holiday2011_slide1.jpg"><img 
        src="http://s3.austegard.com/ais/2011HolidayCard/AIS-holiday2011_slide2.jpg" unselectable><br>
        <img src="http://s3.austegard.com/ais/2011HolidayCard/AIS-holiday2011_slide4.jpg" unselectable><img 
        src="http://s3.austegard.com/ais/2011HolidayCard/AIS-holiday2011_slide3.jpg" unselectable><br>
        <img id="last" src="http://s3.austegard.com/ais/2011HolidayCard/AIS-holiday2011_slide5.jpg" unselectable>
    </div>
</div>
<div id="right" class="frame"></div>
<div id="bottom" class="frame"></div>

CSS

</style>
<!-- access to the HEAD element -->
<style>
* {margin: 0; padding: 0;}
    img {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
    body {overflow: hidden;}
    .frame {background-color: white; z-index: 100; position: absolute;}
    #top {top: 0; left: 0; width: 100%; height: 50px;}
    #left {top: 50px; left: 0;  width: 50px; height: 500px;}
    #right {top: 50px; left: 652px; right: 0px; height: 500px;}
    #bottom {top: 552px; left: 0; width: 100%; bottom: 0px;}
    #main {position: absolute; top: 50px; left: 50px; width: 600px; height: 500px; border: solid 1px gray; overflow: hidden;}
    #slides {position: absolute; width: 1200px; height: 1500px; overflow: hidden;}

JavaScript

$("#first").click(function(){
    $("#slides").animate({left: "-=600px"})
        .delay(1000)
        .animate({top: "-=505px"})
        .delay(1000)
        .animate({left: "+=600px"})
        .delay(1000)
        .animate({top: "-=505px"});
});
$("#last").click(function(event){
    event.stopPropagation();
    $("#slides").animate({top: "+=1010px"});
});