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?

there is no class named 'current' in your html. – Barlas Apaydin Jul 20 '12 at 12:06 — Barlas Apaydin, Jul 20 '12 at 12:06
can you show us an valid html? – Barlas Apaydin Jul 23 '12 at 13:23 — Barlas Apaydin, Jul 23 '12 at 13:23

Barlas Apaydin · Answer 1 · 2012-07-20T12:00:46.557

0

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.

edited Jul 20 '12 at 12:00

answered Jul 20 '12 at 11:53

Barlas Apaydin

7,233
11
55
86

Thats great, but each img does not have the same left value. – Udders Jul 20 '12 at 11:56
read it again, , i update my answer. You must need to define event. – Barlas Apaydin Jul 20 '12 at 11:59
This wont work...I dont want the user to have to click or hover – Udders Jul 20 '12 at 12:01

score 0 · Accepted Answer · edited May 23 '17 at 10:34

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.

Animating elements jquery

2 Answers2