JQuery показать элементы постепенно, а затем показать в обратном порядке - PullRequest
Новая
       26

JQuery показать элементы постепенно, а затем показать в обратном порядке

1 голос
/ 20 января 2012

Я бы хотел показывать 10 элементов (изображений) постепенно. Когда отображается 9-е изображение, я хочу отобразить их снова (вращаясь), но на этот раз в обратном порядке.

Итак, покажите изображения 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ...

Когда 9-й достигнут ... пауза, затем ...

Показать изображения 9, 8, 7, 6, 5, 4, 3, 2, 1

HTML: 

<div class="home-gallery">
<img class="yummy-choco" src="home_chocolate1.jpg" /> 
<img class="yummy-choco" src="home_chocolate2.jpg" /> 
<img class="yummy-choco" src="home_chocolate3.jpg" /> 
<img class="yummy-choco" src="home_chocolate4.jpg" /> 
<img class="yummy-choco" src="home_chocolate5.jpg" /> 
<img class="yummy-choco" src="home_chocolate6.jpg" /> 
<img class="yummy-choco" src="home_chocolate7.jpg" /> 
<img class="yummy-choco" src="home_chocolate8.jpg" /> 
<img class="yummy-choco" src="home_chocolate9.jpg" /> 
<img class="yummy-choco" src="home_chocolate10.jpg" />
</div>

Код Javascript / jQuery, который у меня есть (не могу заставить работать наоборот!): 

// show first image
$('.yummy-choco').hide().eq(0).show();

var pause = 250;
var chocolates = $('.yummy-choco');
var count = chocolates.length;
var i = 0;

setTimeout(transition,pause);

function transition()
{                  
    chocolates.eq(i).fadeIn();

    if (++i >= count)
    {
        i = 0;
    }
    // if on the 10th image, show then pause
    if(i == 9) 
    {
        chocolates.eq(9).fadeIn();
        $(".home-gallery").delay(3000).show(function( ) 
        {
            // here i want to show the images in reverse
            // maybe a for loop?
            chocolates.eq(i-1).fadeOut();
            setTimeout(transition, pause); 
        });
    }
    else 
    {
        chocolates.eq(i-1).fadeOut();
        setTimeout(transition, pause); 
    }
}

Вы можете увидеть полуработающую версию этого здесь: http://www.azature.com/azchocolates/

Любая помощь или идеи высоко ценится!

1 Ответ

0 голосов
/ 20 января 2012

Если вы отслеживаете состояние (увеличивается или уменьшается), вы можете использовать его в своей функции перехода.

У вас есть три случая: либо вы увеличиваете нормально, либо понижаете нормально, либо вам нужно перейти.В третьем случае мы можем просто переключиться с увеличения на уменьшение (или наоборот) и затем снова вызвать функцию перехода. 

var delay = 1000,
    pause = 3000,
    chocolates = $(".yummy-choco"),
    count = chocolates.length,
    id = 0,
    incrementing = true;

chocolates.eq(id).show();

setTimeout(transition, delay);

function transition() {
    var fadeOutId = id,
        totalTimeout = delay;

    if (incrementing && id < count - 1) {
        id++;
    } else if (!incrementing && id > 0) {
        id--;
    } else {
        incrementing = !incrementing;
        return transition();
    }

    chocolates.eq(id).fadeIn();
    chocolates.eq(fadeOutId).fadeOut();

    if(id === 9) {
        totalTimeout += pause;
    }

    setTimeout(transition, totalTimeout);
}

Полный пример на http://jsfiddle.net/AWcvz/1/

...