jQuery Fade in/Fade out divs с переменной синхронизацией

Question

Я пытаюсь изменить решение уже здесь, но у вас есть в общей сложности 7 divs, которые затухают в/из, используя одно и то же пространство на странице. Затем вернитесь к первому div, чтобы начать снова.

Мне также нужно иметь переменные тайминги, т. Е. Div остается видимым в течение 5 секунд, div two остается видимым в течение 3 секунд, div три в течение 4 секунд и так далее, поскольку это зависит от того, сколько контента у каждого есть.

Я просто не могу успешно добавить третий div, который исчезает после div two (красный).

код Я пытаюсь изменить:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 

    <script> 
$(document).ready(function() { 
    $('#one').delay(3000).fadeOut(100); 
    $('#two').delay(3000).fadeIn(100); 
}); 
</script> 

<style> 
html, body {background-color: yellow} 
#one { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    z-index: 200; 
    background-color: #00f; 
    cursor: pointer; 
} 

#two { 
    width: 300px; 
    height: 300px; 
    position: absolute; 
    top: 5px; 
    left: 5px; 
    z-index: 100; 
    background-color: #f00; 
    display: none; 
} 
</style> 

<div id="one">Content for Div one to go here</div> 
<div id="two">Content for Div two to go here</div> 

Любая помощь будет оценена. Спасибо.

Answer 1

Если вам нужен FadeIn/цикл затухания вы можете сделать что-то вроде этого:

$(document).ready(function() { 

loopbox(); 

function loopbox() { 
    $('#one').fadeIn(100).delay(5000).fadeOut(100, function() { 
     $('#two').fadeIn(100).delay(3000).fadeOut(100, function() { 
     $('#three').fadeIn(100).delay(4000).fadeOut(100,function() {         
     loopbox(); 
     }); 
     }); 
    }); 
    } 
}); 

вы можете добавить столько дивы нужно в этой функции обратного вызова и выбрать разные сроки для каждого из них.

Вот jsfiddle

Answer 2

Итак, я собираюсь предоставить несколько фрагментов кода. Первый - это только указание концепции функций обратного вызова в JQuery, а также рекурсивных обратных вызовов. Посмотрите на этот скрипт:

Primer Код

(function Recur(){ 
    $('#one').delay(3000).fadeOut(100,function(){ 
    $('#two').delay(3000).fadeIn(100,function(){ 
     $('#two').delay(3000).fadeOut(100,function(){ 
     $('#three').delay(3000).fadeIn(100,function(){ 
     $('#three').delay(3000).fadeOut(100,function(){ 
     $('#one').delay(3000).fadeIn(100, function(){ 
       Recur(); 
     }) 
     }) 
     }); 
     }) 
    }); 
    }); 
})(); 

У нас есть сценарий с Immediately Invoked Function Expression, который вызывается при загрузке документа. После того, как div исчезнет, ​​следующий затухает. Затем после того, как div #one будет загружен обратно, функция Recur() вызывается снова, чтобы запустить цикл. Это дает эффект слайд-шоу.

Пожалуйста, смотрите скрипку: https://jsfiddle.net/n16bnm1L/1/

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

рабочей слайд-шоу ж/Variable времена

Что делать, если вы добавили класс к каждому элементу и выполняется слайд-шоу на основе показателей набора элементов ?

var i = 0; 
var length = $('.item').length; 
var variableTime = 3000; //default time 

(function Recur(){ 
    switch(i){ 
    case 0: 
     variableTime = 5000; 
     break; 
    case 1: 
     variableTime = 3000; 
     break; 
    case 2: 
     variableTime = 4000; 
     break; 
    } 
    $('.item').eq(i++).delay(variableTime).fadeOut(1000,function(){ 
    if(i == length){ 
     i = 0; 
    } 
    $('.item').eq(i).fadeIn(1000,function(){ 
    Recur(); 
    }); 
}); 
})(); 

Вот скрипка для этого: https://jsfiddle.net/n16bnm1L/2/

Вы можете обновить переменное время switch заявления, как вы добавите больше Дивых-х. Просто убедитесь, что для этих элементов div вы добавляете класс item.

Еще более короткий вариант!

Что делать, если вы поместили переменные раз в массив как индексы переменных времени, и элементы будут по существу соответствовать?

var i = 0; 
var length = $('.item').length; 
var variableTime = [5000,3000,4000]; 
(function Recur(){ 
    $('.item').eq(i).delay(variableTime[i++]).fadeOut(1000,function(){ 
    if(i == length){ 
    i = 0; 
    } 
    $('.item').eq(i).fadeIn(1000,function(){ 
    Recur(); 
    }); 
    }); 
})(); 

Вот скрипку для этого: https://jsfiddle.net/n16bnm1L/4/

Answer 3

Я считаю, что существуют более правильные пути решения этой задачи, но в качестве опции:

var cfg = { 
    "#one" : { delay : 1000, fade : 500},   
    "#two" : { delay : 2000, fade : 1000}, 
    "#three" : { delay : 3000, fade : 2000} 
    }; 

var totalTime = 0; 
$.each(cfg, function(k,v) { totalTime += v.delay + v.fade; }); 

loopDivs(); 
setInterval(loopDivs, totalTime); 


function loopDivs(){ 
    var d = 0; 
    $.each(cfg, function(key, value){ 
    setTimeout(function(){ 
        $(key).show() 
         .delay(value.delay) 
         .fadeOut(value.fade); 
        }, d); 
    d += value.delay + value.fade; 
    }); 
} 

см полный код здесь https://jsfiddle.net/57n3mL82/

Answer 4

У вас есть слишком много избыточность происходит здесь. Вы можете сделать это довольно просто. Использование классов в дополнение к id s

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

Ниже также описано, как вы можете это сделать, не беспокоясь о том, сколько div вы хотите затухать.

$(document).ready(function(){ 
 
    fadeNext($('#div-fader > div'), 0); 
 
}); 
 

 
var fadeNext = function(that, index, fadeLast){ 
 
    
 
    //Set the newIndex to be passed back into this function 
 
    //This will increment up to cycle through all of the divs 
 
    //that are children of #div-fader 
 
    // 
 
    var newIndex = index+1; 
 
    
 
    //If the Index is 0, then we know it is either the first time 
 
    //around, or the fader is restarting 
 
    // 
 
    if(index == 0) { 
 
    
 
    //the fadeLast flag, that is only passed to the function recursively 
 
    //will tell the program that the last div (in this case the #six) is still 
 
    //showing and needs to be hidden 
 
    // 
 
    if(fadeLast == true) { 
 
     $($(that)[$(that).length-1]).fadeOut(100); 
 
    } 
 
    
 
    //Regardless, when the index is 0 always fade in the first div 
 
    // 
 
    $($(that)[index]).fadeIn(100); 
 
    } 
 
    
 
    //Otherwise, while the index is less than the length of $(that) 
 
    //$(that) = #div-fader's div children 
 
    //so length in this case will be 6 as there are 6 children of #div-fader 
 
    // 
 
    else if(index < $(that).length){ 
 
    $($(that)[index-1]).fadeOut(100); 
 
    $($(that)[index]).fadeIn(100); 
 
    } 
 
    
 
    //Lastly, if we do not meet any of the above conditions, that means 
 
    //we are at the last child of #div-fader and should go back to the start 
 
    // 
 
    else newIndex = 0; 
 
    
 
    //the setTimeout will be where you set the timing in between each element 
 
    //to call. So each div will fade-in and out at a rate of 1000ms 
 
    // 
 
    setTimeout(function(){ 
 
    
 
    //look at what is passed back into this function, remember the fadeLast flag? 
 
    //that is passed here as true, because we are starting the cycle over 
 
    //and the last div needs to be faded out 
 
    // 
 
    fadeNext(that, newIndex, true); 
 
    }, 1000); 
 
}

#div-fader > div { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    display: none; 
 
} 
 

 
#one, #div-fader > div:nth-child(odd) { 
 
    background-color: #00f; 
 
    cursor: pointer; 
 
} 
 

 
#two, #div-fader > div:nth-child(even) { 
 
    background-color: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div-fader"> 
 
    <div id="one">Content for Div one to go here</div> 
 
    <div id="two">Content for Div two to go here</div> 
 
    <div id="three">Content for Div three to go here</div> 
 
    <div id="four">Content for Div four to go here</div> 
 
    <div id="five">Content for Div five to go here</div> 
 
    <div id="six">Content for Div six to go here</div> 
 
</div>