jquery 淡入、淡出、淡入 2

Question

我已经在这里阅读了一些内容，但我发帖是因为我似乎无法具体弄清楚我想要做什么。我尝试过调整我在这里找到的现有代码，但没有这样的运气。我不太精通 javascript，这可能没有帮助。我是一名正在康复的闪存设计师。

让我解释一下：

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

1. 屏幕上没有任何内容
2. 在图像 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);
        }
    });

};