Анимация элементов jquery

У меня есть слайд-шоу, которое циклически перебирает изображения, а затем над этими изображениями у меня есть текст, а затем два изображения. Я хочу выяснить, какие изображения я пытаюсь анимировать, и сделать это, однако я хочу иметь задержку между каждой анимацией.

Моя трудность в том, что у меня есть 3 слайда, и на каждом слайде может быть 2 изображения, которые нужно анимировать отдельно на фон, слайды расположены в соответствии с предпочтениями пользователей, поэтому с точки зрения внешнего интерфейса я никогда не могу быть На 100% уверен, что два изображения будут сгруппированы вместе, по этой причине я написал следующее:

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);
    }

А вот мой 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>

По сути, я пытаюсь выяснить, какие изображения присутствуют на текущем слайде, а затем анимировать их, однако в настоящее время оба изображения анимируются одновременно, и я хочу иметь случайную задержку между анимацией одного изображения и затем следующий.

Есть ли лучший способ делать то, что я делаю?


javascript html jquery animated
person Udders    schedule 20.07.2012    source источник
comment
в вашем html нет класса с именем «текущий».   -  person Barlas Apaydin    schedule 20.07.2012
comment
Вы можете показать нам действительный HTML?   -  person Barlas Apaydin    schedule 23.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать что-то вроде:

     $.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);
            }
    });

В любом случае, здесь есть несколько примеров, посмотрите, например, THIS.

person Alex Ball    schedule 20.07.2012

arrow_upward
0
arrow_downward

Я не совсем понимаю, что вы пытаетесь сделать, но я изменил вашу структуру jQuery.

Вам необходимо определить триггер/событие для этого действия, например hover() или клик()

используйте это для меньшего количества кода:

$('.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);
    }
});

если вы не хотите определять триггерные события, вы можете использовать метод each() с setInterval() для синхронизированной анимации.

person Barlas Apaydin    schedule 20.07.2012
comment
Это здорово, но каждый img не имеет одинакового левого значения. - person Udders; 20.07.2012
comment
прочитайте это снова, я обновляю свой ответ. Вам необходимо определить событие. - person Barlas Apaydin; 20.07.2012
comment
Это не сработает... Я не хочу, чтобы пользователю приходилось нажимать или наводить курсор - person Udders; 20.07.2012