hover animation

hover animation

by Andrew Pougher

HTML

<div class="animwrap">
    <img class="anim img-responsive" src="http://brandoral.com/lighted-mouth-mirror/animation/1.png" alt="">
</div>

CSS

body{background:#fff;color:#000}

.animwrap {
    position: relative;
    height: 200px;
    margin-bottom: 250px;
}

.animwrap img {
    opacity: 0;
    position: absolute;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

.animwrap img.anim {
    opacity: 1;
}

JavaScript

var wrapper = $('.animwrap');
var images = null;
var running = null;

images = [];
images.push( $('<img/>', { class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/2.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/3.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/4.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/5.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/6.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/7.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/8.png', alt: '' } ) );
images.push( $('<img/>', {class: 'img-responsive shadowfilter', src: 'http://brandoral.com/lighted-mouth-mirror/animation/9.png', alt: '' } ) );

wrapper.eq(0).append(images);

wrapper.hover(
    function() {
        var e = $(this);
        running = setInterval(function() {
            var c = e.find('.anim');
            var n = c.next();
            
            if (!n.length) {
                n = e.children().first();
            }
            
            c.removeClass('anim');
            n.addClass('anim');    
        }, 500);
    },
    function() {
        clearInterval(running);
        running = null;
    }
);



var i;
mine = [];
for (i = 0, len = 9; i < len; i++) {
  mine.push("asdasda-->"+[i+1]);
}
$("body").prepend(mine)

	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 ...