Javascript jquery淡入淡出淡入2

我在这里读了一些书，但我在这里发帖是因为我似乎不知道我想要做什么。我尝试过调整我在这里找到的现有代码，但没有这样的运气。我对javascript不是很精通，这可能没有什么帮助。我是一个正在恢复的flash设计师

让我解释一下：

我有两个div，一个是非常大的图像，一个是文本。理想情况下，我希望该网页以以下方式运行：

屏幕上什么都没有

淡入图像div（我认为可能需要一些时间来加载）

淡出图像分割

屏幕上没有显示任何内容（即：没有交叉淡入淡出）

淡入文本div

将image div永久保留在那里 任何关于如何实现这一点的想法都将不胜感激！请原谅我的无知

$(document).ready(function(){

  $('#id-of-img').fadeIn(5000).delay(5000).fadeOut(5000); // 5000 is 5 seconds, change this as you wish
  $('#id-of-text').fadeIn(5000);

});

对于

delay（）

函数，这需要jQuery 1.4.2或更高版本

--编辑--

重读你的问题。你说“永久保留图像div”，你是指文本div吗？如果是，我所做的应该可以，如果不是，那么我真的不知道你的意思

对于

delay（）

函数，这需要jQuery 1.4.2或更高版本

--编辑--

---

重新阅读你的问题。你说“永久保留图像div”，是指文本div吗？如果是这样的话，我所做的应该会起作用，如果不是这样的话，我真的不知道你的意思。

由于图像可能很大，请连接图像上的

.load（）

事件，一旦成功加载图像，该事件将被触发。从这里开始，只需使用

.fadeOut（）

和

.fadeIn（）

中的回调函数即可显示/隐藏div

$(function() {
    $(".image img").load(function() {
        $(".image").fadeIn("slow", function() {
            $(this).fadeOut("slow", function() {
                $(".text").fadeIn("slow");
            });
        });
    });
});

---

由于映像可能较大，请连接映像上的

.load（）

事件，该事件将在映像成功加载后触发。从这里开始，只需使用

.fadeOut（）

和

.fadeIn（）

中的回调函数即可显示/隐藏div

$(function() {
    $(".image img").load(function() {
        $(".image").fadeIn("slow", function() {
            $(this).fadeOut("slow", function() {
                $(".text").fadeIn("slow");
            });
        });
    });
});

---

使用事件回调

您希望以在图像完成预加载后提供回调的方式加载图像：

var $textDiv = jQuery('.textDiv'); // contains the text

var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
    jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
        $(this).fadeOut(300, function() {
            $textDiv.fadeIn(300);
        }
    });

};

---

使用事件回调

您希望以在图像完成预加载后提供回调的方式加载图像：

var $textDiv = jQuery('.textDiv'); // contains the text

var img = new Image();
img.src = "images/myImageUrl.jpg";
img.onload = function() {
    jQuery(this).hide().appendTo('.imgDiv').fadeIn(300, function(){
        $(this).fadeOut(300, function() {
            $textDiv.fadeIn(300);
        }
    });

};