jQuery Panorama Viewer

Displays an interactive panoramic image using jQuery

HTML

<script src="http://scaredrabbit.com/js/jquery.easing.1.3.js"></script>
<br>jQuery Pan-o-matic<br><br>

<div class="pan-wrap pan1"></div><br>
<div class="pan-wrap pan2"></div>

CSS

body {
    background: rgb(240, 205, 97);
    color:#fff;
    font-size:30px;
    text-align:center;
}
.pan1 {
    background:url('http://kthornbloom.com/public/pan.jpg');
}
.pan2 {
    background:url('http://kthornbloom.com/public/pan2.jpg');
}
.pan-wrap {
    margin:0 auto;
    width:300px;
    height:300px;
    overflow:hidden;
    position:relative;
    color:#fff;
    font-size:20px;
    text-align:center;
    font-family:sans-serif;
    border-radius:10px;
    border: 5px solid rgb(209, 126, 20);
    cursor:e-resize;
}
.play {
    display: inline-block;
    background: rgba(0, 0, 0, 0.71);
    height: 25px;
    width: 75px;
    border-radius: 15px;
    padding-top: 5px;
    font-size: 14px;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -34px;
    position: absolute;
}

JavaScript

$('.pan-wrap').append('<div class="play">play</div>');

var hoverInterval;

function doStuff() {
    $(this).animate({
      'background-position-x': '+=5%',
    }, 250, 'linear');
}

$(function() {
    $('.pan-wrap').hover(
        function() {
            $(this).empty();
            hoverInterval = setInterval($.proxy(doStuff,this), 250);
        },
        function() {
            // stop calling doStuff
            $(this).append('<div class="play">play</div>');
                clearInterval(hoverInterval);
            $('this').animate({
          'background-position-x': '+=5%',
            }, 1000, 'easeOutQuint');
   });
});