Question

我有一张带背景图片的DIV。图像路径根据$ _GET数组而变化。

<div id="background-img" style="background: url('elements/<?php if (empty($_GET['p'])){ echo 'home'; } else { echo $_GET['p'];} ?>.jpg') no-repeat fixed center center; background-size:cover;"></div>

我希望此DIV的不透明度使用转换从0-1更改

$(document).ready(function(){
        $('#background-img').css('opacity', '0');
        $('#background-img').animate({opacity: 1}, 2000);
})

现在这一切都很棒，花花公子。但我只想在加载图像时（图像非常大）发生此动画。我还想运行其他动画，但只有在该图像加载后才会运行。

我试过这样做：

$(document).ready(function(){
        $('.fadein').css('opacity', '0');
        $('#background-img').css('opacity', '0');
        $('#header').css('opacity', '0');
});
$('#background-img').load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});

但它没有用。动画根本不运行。我正在运行jquery，很高兴用它来解决问题。这似乎是一件简单的事情，但我似乎无法找到如何解决它。是

一旦我搞清楚，我还打算让一些“加载”gif动画进出。

Answer 1

在图像上使用.load。

$('#bg').ready(function(){
    $('#bg').css({opacity:"1"});
});

此处http://jsfiddle.net/UA94f/

Answer 2

试试这个：

http://forum.jquery.com/topic/start-jquery-after-image-loads

或者这可能会有所帮助：Fade in images after they have loaded :)

http://jsfiddle.net/hmeev/

<强>码

$(window).load(function(){
        $('#background-img').animate({opacity: 1}, 2000);
        $('#header').delay(1000).animate({opacity: 1}, 2000);
        $('.fadein').delay(2000).animate({opacity: 1}, 2000); 
});

加载图像后运行JS

2 个答案: