JQuery задержать несколько функций при начальной загрузке для слайд-шоу

Question

Я пытаюсь получить эффект гладкости с помощью своего слайд-шоу, которое я создаю для клиента.

http://melvilledeli.com/demo/

У меня есть 4 отдельных слайд-шоу на одной странице.

Я хочу, чтобы они переходили один за другим.Например) вместо того, чтобы исчезать все сразу, я хочу сделать паузу в 5 секунд, затем слайд-шоу 1 исчезнет, ​​затем подождать полсекунды, затем слайд-шоу 2 исчезнет (вверху справа), затем подождать полсекунды, слайд-шоу 3 (внизу слева) исчезает, подождите полсекунды, а слайд-шоу 4 исчезает (внизу справа).

Я могу изменить скорость переходов, но затем, через некоторое время просмотра страницы, все исчезает.

Я хочу, чтобы это было похоже на бум, бум, бум, бум ... подождите 5 секунд, бум-бум, бум-бум.

Я думаю, это выглядело бы неплохо.

Я пытался использовать .delay (500), но это не сработало.

Answer 1

Во-первых, сделайте ваш параметр воспроизведения согласованным для всех слайд-шоу. Затем, после того, как вы сможете использовать методы «play» и «pause», такие как:

$('#slides, #slides2').slides({
        effect: 'fade',
        crossfade: true,
        preload: true,
        preloadImage: 'images/loading.gif',
        play: 6500,
        hoverPause: false
}); 

$('#slides2').slides('pause').delay(500).slides('play');

Это не проверено, но должно работать в соответствии с документами.

Answer 2

Вы можете настроить это гибко, используя тайм-аут.Просто настройте значения и добавьте / удалите из массива слайд-шоу столько слайдов, сколько вам нужно.

(Не проверено, но вы должны понять суть логики.)

//"constant" values
var MASTER_DELAY = 5000;
var STAGGER_DELAY = 500;

//Array of four Slideshow objects, DOM nodes ... or whatever they are in your case, and index for said array
var slideshows = [slideshow1, slideshow2, slideshow3, slideshow4];
var nextSlideshowIndex = 0;

var slideshowTimeout = setTimeout('onSlideshowTimeout()', MASTER_DELAY);

function onSlideshowTimeout()
{
  if(nextSlideshowIndex < slideshows.length)
  {
    $(slideshows[nextSlideshowIndex]).animate( /* ... slideshow animation code ... */ );
    slideshowTimeout = setTimeout('onSlideshowTimeout()', STAGGER_DELAY);
    nextSlideshowIndex++;
  }

  else
  {
    slideshowTimeout = setTimeout('onSlideshowTimeout()', MASTER_DELAY);
    nextSlideshowIndex = 0;
  }
}

Answer 3

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

        $('#slides').slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        }); 

        $('#slides2').delay(500).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        });                 

        $('#slides3').delay(1000).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        }); 

        $('#slides4').delay(1500).slides({
            effect: 'fade',
            crossfade: true,
            preload: true,
            preloadImage: 'images/loading.gif',
            play: 6500,
            hoverPause: false
        });