我有一个带有背景图像的 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 动画进出。
最佳答案
对图像本身使用 .load。
$('#bg').ready(function(){
$('#bg').css({opacity:"1"});
});
关于javascript - 图片加载后运行JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20414982/