JQuery исчезает с циклом и задержкой

Question

У меня есть 2 Div, сложенные друг на друга.

Мне нужна действительно простая функция, которая будет:

а) Подождите 3 секунды, а затем б) FadeOut верхнего Div, чтобы показать второй Div c) Подождите 3 секунды снова, а затем г) FadeIn верхней Div снова д) вернуться назад

Может кто-нибудь дать совет?

Большое спасибо

Answer 1

Вот попытка.

function foo() {
    jQuery("#mydiv").animate({opacity: 1.0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 0}, {duration: 3000})
        .animate({opacity: 1.0}, {duration: 3000, complete: foo})
}

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

PS: это вызывает переполнение стека с течением времени?

Answer 2

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

Вот jQuery ...

$(document).ready(function() {

     var j = 0;
     var delay = 2000; //millisecond delay between cycles
     function cycleThru(){
             var jmax = $("ul#cyclelist li").length -1;
             $("ul#cyclelist li:eq(" + j + ")")
                     .animate({"opacity" : "1"} ,400)
                     .animate({"opacity" : "1"}, delay)
                     .animate({"opacity" : "0"}, 400, function(){
                             (j == jmax) ? j=0 : j++;
                             cycleThru();
                     });
             };

     cycleThru();

});

... и некоторые начальные css ...

ul#cyclelist {width:200px;border:solid;position:relative;overflow:hidden;height:200px}
ul#cyclelist li {font-size:1.4em;padding:20px;opacity:0;position:absolute}

У вас уже есть свой HTML, но на случай, если вам нужен пример ...

<ul id="cyclelist">
  <li><div>First Div</div></li>
  <li><div>Second Div</div></li>
  <li><div>Third Div</div></li>
</ul>

Я бы хотел взять кредит на это, но это прямо из CSS-хитрости http://css -tricks.com / snippets / jquery / цикл-через-список /

Answer 3

если два div имеют идентификаторы "id1" и "id2", а id2 - верхний, то код будет выглядеть так:

function fadeIn() {
  $("id2").animate({opacity:0},500);
  setTimeout(fadeOut,3500);
}

function fadeOut() {
  $("id2").animate({opacity:1},500);
  setTimeout(fadeIn,3500);
}

function startAnim() {
  setTimeout(fadeIn,3000);
}

startAnim () запускает цикл анимации, который вы должны называть @ start. Затем fadeIn & Out продолжайте анимировать id2 и устанавливайте время ожидания друг для друга Задержка составляет 3500, так как вы хотели 3 секунды задержки (т.е. 3000 мс) и 500 для завершения предыдущей анимации. Это можно было сделать с помощью функции обратного вызова в animate, но это более грязно.

Answer 4

никто никогда не увидит этого, но на всякий случай ...

<script>
$(document).ready(function() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

это без зацикливания ....

Это было бы

<script>
$(document).ready(function() {
    function animate(){
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
        $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);    
    }
    animate();  
    setInterval(animate, 10000);
}); 
</script>

Answer 5

Я знаю, что это старо, но я думал, что поделюсь тем, что я сделал, чтобы достичь этого

$(document).ready(function() {
    var delay = 500;
    $("#mydiv").bind('fadein', function()
    {
        $(this).fadeOut(1000, function()
        {
            $(this).delay(delay).trigger('fadeout');
        });
    });

    $("#mydiv").bind('fadeout', function()
    {
        $(this).fadeIn(1000, function()
        {
            $(this).delay(delay).trigger('fadein');
        });
    });

    $("#mydiv").fadeIn(1000, function()
    {
        $(this).trigger("fadein");
    });
});

затем позвоните, когда хотите остановить

$("#mydiv").stop().hide();

Answer 6

ЕСЛИ вы тоже хотите получить xfade. Используйте скрипт floyed, но внесите изменения, которые я использовал. Единственная проблема - ваше первое изображение, которое вы хотите показать, должно быть вторым в элементах li

$(document).ready(function() {

         var j = 0;
         var delay = 5000; //millisecond delay between cycles
         function cycleThru(){
                 var jmax = $("ul#cyclelist li").length -1;
                 $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "1"} ,1000)
                         .animate({"opacity" : "1"}, delay);
             $("ul#cyclelist li:eq(" + j + ")").next().animate({"opacity" : "1"} ,1000);    
             $("ul#cyclelist li:eq(" + j + ")")
                         .animate({"opacity" : "0"}, 1000, function(){
                                 (j == jmax) ? j=0 : j--;
                                 cycleThru();
                         });
                 };

         cycleThru();

 });

Answer 7

В этой попытке используется функция ожидания небольшой поваренной книги с сайта jquery.com.

Функция doFading предполагает, что id верхнего div равен «a4».

function doFading() {
      $("#a4").wait(3000)
      .fadeOut("slow")
      .wait(3000)
      .fadeIn("slow",doFading);
    }

$.fn.wait = function(time, type) {
        time = time || 1000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };