Animating elements jquery

Question

I have a slide show that cycles through images, and then above those images I have some text and then two images. What I am wanting to is work out which images I am trying to animate and do so, however I want to have a delay between each animation.

My difficulty is that I have 3 slides, and each slide can have 2 images that need to be animated seperatly to the background, the slides are arranged are arranged based around the users preferences so from a front end point of view, I can never be 100% sure what two images will be grouped together, for that reason, I have written the following,

if($(".current .iphone").length) {
 $(".current .iphone").animate({
 opacity : 1,
 left : "840px"
 }, 800);
 }
 if($(".current .blackberry").length) {
 $(".current .blackberry").animate({
 opacity : 1,
 left : "1119px"
 }, 800);
 }
 if($(".current .samsung").length) {
 $(".current .samsung").animate({
 opacity : 1,
 left : "783px"
 }, 800);
 }
 if($(".current .htc").length) {
 $(".current .htc").animate({
 opacity : 1,
 left : "900px"
 }, 800);
 }
 if($(".current .nokia").length) {
 $(".current .nokia").animate({
 opacity : 1,
 left : "823px"
 }, 800);
 }
 if($(".current .nokia").length) {
 $(".current .nokia").animate({
 opacity : 1,
 left : "823px"
 }, 800);
 }

And here is my HTML,

<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
 <section data-background="_/images/elements/parralex-1.jpg">
 <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
 <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
 </section>
 <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
 <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
 <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
 </section>
 <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
 <div class="samsung foreground"></div>
 <div class="nokia foreground"></div>
 </section>
 </div>

Basically what I am doing is trying to work out which images are present in the current slide, and then animate then, however currently both images animate at the same time, and I want to have a random delay between one image being animated and then the next.

Is there a better way to do what I am doing?

• Barlas Apaydin: there is no class named 'current' in your html.
• Barlas Apaydin: can you show us an valid html?

Answer 1

You could try something like:

 $.each($('#slideshow').find('img'), function(i, img){
 if($(img).hasClass('iphone')){
 setTimeout(
 function(){
 $(img).animate({
 opacity : .5,
 'margin-left' : "+=40px"
 }, 800)
 }, Math.random() * i *800);
 }
 if($(img).hasClass('blackberry')){
 setTimeout(
 function(){
 $(img).animate({
 opacity : .5
 'margin-left' : "-=40px"
 }, 800)
 }, Math.random() * i *800);
 }
 });

Anyway here there are some example, look THIS for example.

Answer 2

I coundn't fully understand what are you trying to do but i changed your jQuery structure.

You need to define a trrigger/event for this action, like hover(), or click()

use this for less code:

$('.current').hover(function() {//mouse over event
 var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class
 if($('.current .'+currentClass).length) {
 $(".current ."currentClass).animate({
 'opacity' : '1',
 'left' : '840px'
 }, 800);
 }
});

if you dont want to define trigger events, you can use each() method with setInterval() for timed animation.

• Udders: Thats great, but each img does not have the same left value.
• Barlas Apaydin: read it again, , i update my answer. You must need to define event.
• Udders: This wont work...I dont want the user to have to click or hover