加载计时器时的jQuery淡入淡出答案

【问题标题】：jQuery fadein when loaded with timer加载计时器时的jQuery淡入淡出
【发布时间】：2014-06-10 08:45:24
【问题描述】：

我想构建一个脚本，在页面加载时将外部文件加载到 DIV 中，然后在内容完全加载后立即淡入内容。然后我想显示第一个 div 60 秒，然后在第一个 div 完全加载后淡入第二个 div。

现在我必须在我的脚本中使用不同的进程，所以现在它会在 div 可见时重新加载它的内容...我想在 div 淡入之前重新加载它，然后显示 60 秒，然后执行相同的过程与下一个 div。

谁能帮帮我？我|在这里尝试了很多东西，但无法按我的意愿工作。

这是我目前的代码；

<html>
<head>
<title>
    Title
</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var divs = $('.fade');

function fade() {
    var current = $('.current');
    var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;

    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }

    var next = divs.eq(nextIndex);

    next.stop().fadeIn(3000, function() {
        $(this).addClass('current');
    });

    current.stop().fadeOut(3000, function() {
        $(this).removeClass('current');
        setTimeout(fade, 60000);
    });
}

fade();
});//]]>

</script>

<script type="text/javascript">
$.ajaxSetup(
{
    cache: false,
    async:false
});
$(document).ready(function(){

    $('#div1').load('content1.php');
    $('#div2').load('content2.php');
    $('#div3').load('content3.php');
    $('#div4').load('content4.php');
    $('#div5').load('content5.php');

});
function div1()
{
 $('#div1').load('content1.php');
}
setInterval('div1()', 50000);

function div2()
{
 $('#div2').load('content2.php');
}
setInterval('div2()', 50000);

function div3()
{
 $('#div3').load('content3.php');
}
setInterval('div3()', 50000);

function div4()
{
 $('#div4').load('content4.php');
}
setInterval('div4()', 50000);
</script>

<style>
body {margin:0;}
.fade {position:absolute; top:0; left:0; display:none;}
.current {z-index:999;}
</style>

</head>
<body>

<div id="wrapper">
    <div id="div1" class="fade current"></div>
    <div id="div2" class="fade"></div>
    <div id="div3" class="fade"></div>
    <div id="div4" class="fade"></div>
    <div id="div5" class="fade"></div>
</div>

</body>
</html>

【问题讨论】：

请设置小提琴
完成 :) 这是小提琴@TheMohanAhuja ;) jsfiddle.net/fwqC4
无论如何，我猜你的小提琴在这里行不通:)
@TheMohanAhuja 你可以看看这里； zorensen.no/ajax 不行。正如我所说，我想显示 DIV1、DIV2 等直到 nr。 5 然后循环整个事情以再次从数字 1 重新开始。到目前为止，我的这个脚本只显示 DIV1，没有任何反应。只是要非常清楚； 1）我想在它完全加载后淡入 div 2）淡入/淡出 DIV1-5 3）然后循环它以便重新开始
@TheMohanAhuja 有什么想法吗？

标签： jquery load fadein fadeout

【解决方案1】：

这里有一个这样做的概念：

$.ajaxSetup({
    cache: false,
    async:true          // you really want to allow async ajax
});

$(document).ready(function(){

    var divs = $();

    function markLoaded() {
        var self = $(this);
        self.data("loaded", true);

        function next(item) {
            // if we're the current item and we are loaded
            // then show us.  If we're not yet loaded, then do
            // nothing here and we will get shown when
            // markLoaded is called
            if (item.hasClass("current") && item.data("loaded")) {
                item.fadeIn(3000, function() {
                    // move current to the next one
                    item.removeClass("current");
                    var index = (divs.index(item) + 1) % divs.length;
                    var nextItem = divs.eq(index);
                    // display for 60 seconds before fading out
                    item.delay(60 * 1000).fadeOut(3000, function() {
                        nextItem.addClass("current");
                        // Now that this is hidden and we're temporarily done with, 
                        // reload the content for this div for the next time it is displayed.
                        // This will essentially preload the content so it should be ready
                        // when it's time to display this div.
                        item.data("loaded", false);
                        item.load(item.data("url"), markLoaded);
                        // now get the next item going
                        next(nextItem);
                    });
                });
            }
        }
        next(self);
    }

    // hide all the divs and start the content loading into them
    for (var i = 1; i <= 5; i++) {
        var item = $("#div" + i);
        var content = 'content' + i + '.php';
        item.data("url", content);
        divs = divs.add(item);
        item.hide().load(content, markLoaded);
    }
});

模拟工作在这里：http://jsfiddle.net/jfriend00/seLet/

这是一般逻辑：

始终对 Ajax 调用使用异步 - 非异步会锁定浏览器，这对用户体验非常不利。
所有 div 都在循环中加载（而不是重复代码）。
当任何 div 完成加载时，如果它有 class="current" 就会显示（只有一个会有那个）
这显然会首先显示 div1，因为它是唯一带有 class="current" 的
div1 淡入后，会从自身中删除“当前”类
然后它计算下一个 div，淡出正在显示的 div，将 "current" 类添加到新的类并调用 next(nextItem)。
一旦 div 完成淡出，我们就会重置它的状态并告诉它再次加载新内容，以便在下次显示时拥有新内容（预加载内容）
如果该 div 已完成加载，它将开始淡入
如果它还没有完成加载，那么代码什么也不做，它会在加载完成并调用 markLoaded 时显示出来。

【讨论】：

哇！谢谢你！ :) 如果 DIV 或加载到 DIV 中的文件的名称不是“Div1”、“Div2”等和“content1.php”、“content2.php”等，我该怎么办？假设第一个 div 名称为“myfirstdiv”，第二个名称为“andthisismyseconddiv”？ :)
@zorensen - 您可以将各种名称放入一个数组中，然后从names[0] 中提取第一个名称，从names[1] 中提取第二个名称，依此类推。 DRY - Don't Repeat Yourself 的原则是你不应该在任何地方拥有相同代码的多个副本。将通用代码放入函数并调用这些函数或将重复代码组织成循环。当您需要对多个不同的项目执行相同的操作时，将这些项目放入一个数组并遍历该数组。
谢谢。但是我尝试了您的代码，它只显示第一个 DIV。它永远不会淡入此处的下一个 div...
有什么想法@jfriend00？
@zorensen - 你有我可以调试的测试页面吗？