jQuery淡入，淡出，淡入2

Question

我已经在这里做了一些阅读，但我正在发布内容，因为我似乎无法具体弄清我要做什么。 我试图调整在这里找到的现有代码，但是没有这种运气。 我不太精通javascript可能对您没有帮助。 我是一名正在恢复的Flash设计师。

让我解释：

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

1. 屏幕上没有任何内容
2. 在image div中淡入（我认为可能需要一些时间才能首先加载）
3. 淡出图像div
4. 屏幕上没有任何内容（即：不是淡入淡出）
5. 淡入文字div
6. 将图片div永久保留在那里。

任何有关如何解决此问题的想法将不胜感激！ 再一次，请原谅我的无知。

Answer 1

由于图像可能很大，因此请在图像上连接.load()事件，一旦图像成功加载，将触发该事件。 从那里开始，只需使用.fadeOut()和.fadeIn()的回调函数即可显示/隐藏div。

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

jsfiddle上的代码示例

Answer 2

$(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);

});

这需要jQuery 1.4.2或更高版本的delay()函数

-编辑-

只需重新阅读您的问题即可。 您说“将图像div永久保留在这里”，您是说文本div吗？

Answer 3

使用事件回调

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

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);
        }
    });

};