We Keep Coding

Image magnifying glass in gallery

This code work for every images in gallery even thumbnails but i want to magnifying just in selected large image.
another problem is by placing on a photo, the magnifying glass shows another photo zoomed.
this code has pure css gallery and i think the problem is for javascript section.
I changing the img tag from this line( magnify.magnifyImg('img', magnification, magnifierSize);) tho name of a class( .magnifiedImg) but it steel not working. please help me.
enter code
/*Size is set in pixels... supports being written as: '250px' */
var magnifierSize = 250;
/*How many times magnification of image on page.*/
var magnification = 4;
function magnifier() {
this.magnifyImg = function (ptr, magnification, magnifierSize) {
var $pointer;
if (typeof ptr == "string") {
$pointer = $(ptr);
} else if (typeof ptr == "object") {
$pointer = $(ptr);
}
if (!($pointer.is('img'))) {
alert('Object must be image.');
return false;
}
magnification = +(magnification);
$pointer.hover(function () {
$(this).css('cursor', 'none');
$('.magnify').show();
//Setting some variables for later use
var width = $(this).width();
var height = $(this).height();
var src = $(this).attr('src');
var imagePos = $(this).offset();
var image = $(this);
if (magnifierSize == undefined) {
magnifierSize = '150px';
}
$('.magnify').css({
'background-size': width * magnification + 'px ' + height * magnification + "px",
'background-image': 'url("' + src + '")',
'width': magnifierSize,
'height': magnifierSize
});
//Setting a few more...
var magnifyOffset = +($('.magnify').width() / 2);
var rightSide = +(imagePos.left + $(this).width());
var bottomSide = +(imagePos.top + $(this).height());
$(document).mousemove(function (e) {
if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
$('.magnify').hide();
$(document).unbind('mousemove');
}
var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
$('.magnify').css({
'left': e.pageX - magnifyOffset,
'top': e.pageY - magnifyOffset,
'background-position': backgroundPos
});
});
}, function () {
});
};
this.init = function () {
$('body').prepend('<div class="magnify"></div>');
}
return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize);
/*magnifying*/
.magnifiedImg {
width: 700px;
display: block;
margin: auto;
}
.magnify {
border-radius: 50%;
border: 2px solid black;
position: absolute;
z-index: 20;
background-repeat: no-repeat;
background-color: white;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
display: none;
cursor: none;
}
/*gallery*/
* {
box-sizing: border-box;
}
.gallery__img ,.gallery__thumb img {
max-width: 100%;
vertical-align: top;
width:100%;
}
.gallery {
display: flex;
margin: 10px auto;
max-width: 600px;
position: relative;
padding-top: 66.6666666667%;
}
#media screen and (min-width: 600px) {
.gallery {
}
}
.gallery__img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease-in-out;
max-height: 303px
}
.gallery__thumb {
padding-top: 6px;
margin: 6px;
display: block;
}
.gallery__selector {
position: absolute;
opacity: 0;
visibility: hidden;
}
.gallery__selector:checked + .gallery__img, .gallery__selector:hover + .gallery__img {
opacity: 1;
}
.gallery__selector:checked ~ .gallery__thumb > img, .gallery__selector:hover ~ .gallery__thumb > img {
box-shadow: 0 0 0 3px #0be2f6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container main-container">
<div class="row">
<div class="col-lg-5 col-md-6 about-product-col">
<div class="product-pics-area">
<section class="gallery">
<div class="gallery__item ">
<input type="radio" id="img-1" checked name="gallery" class="gallery__selector" />
<img class=" gallery__img magnifiedImg" src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-1" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" alt="" width="150" height="100" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-2" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-2" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" width="150" height="100" alt="" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-3" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/1057/600/400.jpg" alt="" />
<label for="img-3" class="gallery__thumb"><img src="https://picsum.photos/id/1057/600/400.jpg" width="150" height="100" alt="" /></label>
</div>
<div class="gallery__item">
<input type="radio" id="img-4" name="gallery" class="gallery__selector" />
<img class="gallery__img " src="https://picsum.photos/id/106/600/400.jpg" alt="" />
<label for="img-4" class="gallery__thumb"><img src="https://picsum.photos/id/106/150/100.jpg" alt="" /></label>
</div>
</section>
<!-- partial -->
</div>
</div>
here

How to reload a function(event)

I have a div having position: fixed; otherwise at a certain time on scroll down it's having position: absolute;.
My issue is that the position: fixed; of my div depends on the top of my footer. However the top of my footer changes but not the limit of the part where my div should be 'fixed'. Maybe the code would be more clear :
html :
<div id="header" style="height:500px; width:800px; border: 5px solid green; " >
header
</div>
<div id="top" style="height:3000px; width:800px; border: 5px solid yellow; " >
<button onclick="ReduceSize()"> Reduce size </button>
<div id="comment" style="padding-bottom:30px; height:700px; width : 300px; margin-left:30px; border: 5px solid orange;" >
</div>
</div>
<div id="bottom" style="height:3000px; width:800px; border: 5px solid green; " >
footer
</div>
js :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
</script>
<script>
function ReduceSize() {
var obj = document.getElementById('top');
obj.style.height = "750px";
}
$(document).ready(function () {
var haut = $('#comment').offset().top;
var hautBottom = $('#bottom').offset().top - parseFloat( $('#comment').css('height').replace(/auto/, 0) ) ;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if( (y >= (haut-20) ) && (y < hautBottom ) ) {
$('#comment').css({ position: 'fixed', top:20 });
}else{
if(y >= haut){
$('#comment').css({ position: 'absolute', top:hautBottom });
}
if(y < hautBottom ){
$('#comment').css({ position: 'absolute', top:parseFloat( $('#top').offset().top) });
};
};
});
});
</script>
Thanks in advance.

It is not 100% clear for me, what you want to achieve, but I think this is it:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
function ReduceSize() {
$(content).css('height', '600px');
set_comment_position();
}
function set_comment_position(){
var header = $('#header');
var comment = $('#comment');
var footer = $('#footer');
var scroll = $(window).scrollTop();
var header_height = header.outerHeight();
var comment_height = comment.outerHeight();
var comment_distance_top = header_height - scroll;
var footer_offset_top = footer.offset().top;
var footer_distance_top = footer_offset_top - scroll;
var comment_distance_footer = footer_distance_top - comment_height;
if (comment_distance_top <= 0) {
if (comment_distance_footer > 0) {
comment.css({
position: 'fixed',
top: '0px',
bottom : 'auto'
});
} else {
comment.css({
position: 'absolute',
top: 'auto',
bottom: '0px'
});
}
} else {
comment.css({
position: 'absolute',
top: '0px',
bottom : 'auto'
});
}
}
$(document).ready(function(){
set_comment_position()
});
$(window).scroll(function(){
set_comment_position();
});
</script>
</head>
<body>
<div id="header" style="height:100px; width:800px; background-color: lightgreen; " >
header
</div>
<div id="content" style="height:800px; width:800px; background-color: lightgrey; position: relative;" >
<div id="comment" style="height:400px; width : 300px; background-color: orange; position: absolute; top: 0px;" >
comment
<button onclick="ReduceSize()"> Reduce size </button>
</div>
</div>
<div id="footer" style="height:800px; width:800px; background-color: lightgreen; " >
footer
</div>
</body>
</html>
The point is to wrap the positioning logic into one separate function and call this function on docready, scroll and resize.

Hover function loops infinitly in plugin

I am making a simple plugin in which if i hover over an image its background color should change to semi-transparent black.
For that I have placed a tag above it with class name overlay to give the effect. Since height and width will be different for each image, I am taking the height/width from the image and dynamically giving it to overlay class. In the end when mouse goes out I am simply making background color transparent.
Here's the code
<div class="overlay"></div>
<a href="" class="box">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this);
var width = $this.width();
var height = $this.height();
$this.hover(function(){
$('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
}
This is working but not as it should be when in and out starts and never stops; kind of going in loop.
Are there any solutions to this? Or is there a correct way to implement the same functionality as a plugin?

There is no real need to have a plugin for this
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
}
.box:hover .overlay {
left: 0;
top: 0;
bottom: 0;
right: 0;
display: inline-block;
}
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>
If you want jQuery plugin
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay');
$this.hover(function() {
$overlay.show();
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.box {
display: inline-block;
position: relative;
}
.box .overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.box:hover .overlay {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Try this updated fiddle
HTML code
<div class="box">
<div class="overlay"></div>
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</div>
JS code
(function($){
$.fn.imageOverlay = function(){
return this.each(function(){
var $this = $(this);
var width = $this.find("img").width();
var height = $this.find("img").height();
$this.hover(function(){
$this.find('.overlay').css({
width: width,
height: height,
backgroundColor: 'rgba(0,0,0,0.5)'
});
console.log('in');
}, function(){
$this.find('.overlay').css({
width: 0,
height: 0,
backgroundColor: 'rgba(0,0,0,0)'
});
console.log('out');
});
});
}
}(jQuery));
(function($){
$('.box').imageOverlay();
}(jQuery));

If you are really looking for a jQuery only solution, then you can look at a timer based solution like
(function($) {
$.fn.imageOverlay = function() {
return this.each(function() {
var $this = $(this),
$overlay = $this.find('.overlay'),
$img = $this.find("img"),
timer;
$img.hover(function() {
var width = $img.width();
var height = $img.height();
$overlay.css({
width: width,
height: height
}).show();
}, function() {
timer = setTimeout(function() {
$overlay.hide();
}, 200);
});
$overlay.hover(function() {
clearTimeout(timer);
}, function() {
$overlay.hide();
});
});
}
}(jQuery));
(function($) {
$('.box').imageOverlay();
}(jQuery));
.overlay {
position: absolute;
display: inline-block;
background-color: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="overlay"></div>
<a href="">
<img src="http://www.cars.co.za/images/specials/ncs-red-renault.jpg" alt="" />
</a>
</div>

Carousel animation for left button works incorrectly

I am currently working on my own carousel script, but the transition animation for the left button is not working correctly.
I think the problem is in the test function under if($move=="left"), but I am unable to figure out what is causing this.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$(this).css({
"margin-left": "100%"
});
$("#carousel ul").animate({
marginLeft: "100%"
}, 1000, function() {
$(this).find("li:first").before($(this).find("li:last"));
$(this).css({
marginLeft: 0
});
});
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-100%"
}, 1000, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
<li>
<img src="http://placehold.it/600x330" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>
enter link description here

You should change items before animation. Also fixed margins in animations to absolute values.
$(document).ready(function() {
/*********** CAROUSEL **********/
var carouselInterval = setInterval(function() {
moveCarousel();
}, 3000);
var carouselImageCount = $("#carousel li").length; // count the number of images
var transitionCount = 0;
function moveCarousel() {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
// when the cursur hovers on the image
$("#carousel,.carouselArrowRight,.carouselArrowLeft").hover(function() {
clearInterval(carouselInterval);
}, function() {
carouselInterval = setInterval(function() {
moveCarousel();
}, 5000);
});
/*********** CAROUSEL **********/
/*********** CAROUSEL ARROWS ************/
$(".carouselArrowRight").click(function() {
//moveCarousel();
test("right");
});
$(".carouselArrowLeft").click(function() {
test("left");
//moveCarousel();
});
function test($move) {
if ($move == "left") {
transitionCount--;
$("#carousel ul").find("li:first").before($("#carousel ul").find("li:last"));
$("#carousel ul").css({marginLeft: "-600px"})
.animate({marginLeft: "0"}, 2500);
} else {
transitionCount++;
if (transitionCount == carouselImageCount) {
transitionCount = 0;
$(this).css({
marginLeft: 0
});
}
$("#carousel ul").animate({
marginLeft: "-600px"
}, 2500, function() {
$(this).find("li:last").after($(this).find("li:first"));
$(this).css({
marginLeft: 0
});
});
}
}
/*********** CAROUSEL ARROWS ************/
});
#carousel {
width: 100%;
overflow: hidden;
}
#carousel ul {
padding: 0px;
margin: 0px;
width: 1920px;
height: 330px;
display: flex;
}
#carousel ul li {
width: 100%;
text-align: left;
list-style: none;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sectionArea01">
<div class="wrapCarousel">
<div class="carouselAlignment">
<p class="carouselArrowLeft">
<img src="http://placehold.it/30x30" alt="">
</p>
<div class="wrapInner">
<div id="carousel">
<ul id="carouselImages">
<li id="black">
<img src="http://placehold.it/600x330/000000/eeeeee" alt="">
</li>
<li id="red">
<img src="http://placehold.it/600x330/ff0000/eeeeee" alt="">
</li>
<li id="green">
<img src="http://placehold.it/600x330/00ff00/dddddd" alt="">
</li>
<li id="blue">
<img src="http://placehold.it/600x330/0000ff/aaaaaa" alt="">
</li>
</ul>
</div>
</div>
<p class="carouselArrowRight">
<img src="http://placehold.it/30x30" alt="">
</p>
</div>
</div>
</section>

Animate a PNG sequence by scrolling

Basically, I want to dynamically add/remove the class .show to the images inside .container depending on the scroll position. I want to change the class after some position.
$(document).ready(function() {
var container = $('#container'),
nImg = 0; // active picture
imgNum = $('#container img').length;
var topDiv = (container).offset() || {
"top": NaN
}).top;
$(window).bind('scroll', function() {
var y = $(this).scrollTop();
if (y > topDiv) {
nImg++;
} else {
nImg--;
}
if (nImg >= imgNum) {
nImg = 0;
}
if (nImg < 0) {
nImg = imgNum - 1;
}
$(".animated").each(function() {
$(this).removeClass("show")
});
$(".animated").eq(nImg).addClass("show");
});
});
.animated {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
<div id="container">
<img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
<img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
<img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
<img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
<img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>
If you scroll slowly you see that it actually works, but much too fast - that's the problem. I just to move slowly and want to start it from after some position.

See the below example for how to animate sequence image when page scroll.
$(document).ready(function () {
$('.aniScrollContainer').aniScroll({});
});
.aniScrollContainer {
height:300px;
background-color:#a1a1a1;
}
.myAniScrollContainer200 {
height:200px;
}
#header {
display: block;
height: 500px;
width: 100%;
background-color:#e0e0e0;
}
.gap {
display: block;
height: 100px;
width: 100%;
background-color:#e0e0e0;
}
#footer {
display: block;
height: 1500px;
width: 100%;
background-color:#e0e0e0;
}
.aniScrollContainer {
position: relative;
height: 100px;
}
.aniScrollContainer img.animated {
position: absolute;
display: none;
top: 0;
left: 0;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://www.durley.net/animate-on-scroll/js/aniscroll.js"></script>
<div id="header"></div>
<div class="aniScrollContainer myAniScrollContainer">
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-01.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-02.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-03.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-04.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-05.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-06.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-07.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-08.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-09.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-10.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-11.jpg"/>
<img src="http://www.durley.net/animate-on-scroll/images/armani-bag-1000-03-12.jpg"/>
</div>
<div id="footer"></div>

See this jsFiddle for an example for how to limit how often it can change.
function animationTimer(){
canChange = true;
}
$(window).bind('scroll', function() {
if(canChange)
{
canChange = false;
setTimeout(animationTimer, 250);
// ...
}
});
This will allow the image to change every 250 ms, so change the 250 to a number which suits you to throttle the speed of which it changes.

You can use a sleep function (setTimeout) to wait some time between actions. And to be sure that isn't executet more than 1 time, you can use semaphores to lock critical regions.
In the example below I add and remove a class (this is the semaphore). And I make use of setTimeout to wait a time to execute that code.
$(document).ready(function () {
var container = $('#container'),
nImg = 0; // active picture
imgNum = $('#container img').length;
var topDiv = ((container).offset() || { "top": NaN }).top;
$(window).bind('scroll', function() {
if(!container.hasClass('lock')) {
container.addClass('lock');
setTimeout(function() {
var y = $(this).scrollTop();
if(y>topDiv){
nImg++;
}else{
nImg--;
}
if(nImg>=imgNum){ nImg = 0; }
if(nImg<0){ nImg = imgNum-1; }
$(".animated").each(function(){
$(this).removeClass("show")
});
$(".animated").eq(nImg).addClass("show");
container.removeClass('lock');
},200);
}
});
});
.animated { display: none;}
.show { display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px"></div>
<div id="container">
<img src="http://i.imgur.com/2oVbl7z.png" class="animated show" />
<img src="http://i.imgur.com/S5s0Mv1.png" class="animated" />
<img src="http://i.imgur.com/0vBEXL7.png" class="animated" />
<img src="http://i.imgur.com/ffg7v9n.png" class="animated" />
<img src="http://i.imgur.com/9FD5kdE.png" class="animated" />
</div>
Note: You can change the value of setTimeout to match your speed needs.