Question

我在这里做了一些阅读，但我发帖是因为我似乎无法弄明白我想要做什么。我已经尝试调整我在这里找到的现有代码，但没有这样的运气。我可能不太熟悉javascript。我是一个正在恢复的闪存设计师。

让我解释一下：

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

屏幕上没有任何内容
淡入图像div（我认为首先加载可能需要一些时间）
淡出图片div
屏幕上没有任何内容（即：不是交叉淡入淡出）
淡入文字div
永久保留图像div。

任何有关如何处理此问题的想法都将非常感谢！再次，请原谅我的无知。

Answer 1

由于图像可能很大，因此连接图像上的.load()事件会在图像成功加载后触发。从那里只需使用.fadeOut()和.fadeIn()中的回调函数来显示/隐藏您的div。

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

Code example on 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);

});

这需要delay()函数

的jQuery 1.4.2或更高版本

- 编辑 -

重新阅读你的问题。你说“永久地留下图像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);
        }
    });

};

jquery Fade In，Fade Out，Fade In 2

3 个答案: