我想使用缓慢的动画效果更改背景图像,但是它没有起作用。
$('body').stop().animate({background:'url(1.jpg)'},'slow');
语法有问题吗!!
我想使用缓慢的动画效果更改背景图像,但是它没有起作用。
$('body').stop().animate({background:'url(1.jpg)'},'slow');
语法有问题吗!!
你可以通过将图像的不透明度淡出到0,然后更改背景图像,最后再将图像淡入来获得类似的效果。
这将需要一个 div,在页面上其他所有元素的后面,宽度与 body 相同。
<body>
<div id="bg"></div>
...
</body>
你可以使用CSS将其宽度设为整个页面宽度:
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
然后对它的属性进行动画处理。
$('#bg')
.animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(1.jpg)'})
.animate({opacity: 1});
});
你可以创建一个在当前背景div上方的第二个背景div,然后将其淡入,这样可以获得更多的交叉效果。
body
中所有内容的不透明度。我不确定这是否符合OP的要求。 - user113716.css({'background-image': 'url(img/'result.bgimage')'})
我该如何将回调数据放入URL中? - getaway'background-image': 'url(img/result.bgimage)'
。 - Marcus Whybrow来自jQuery文档:
基本的jQuery功能无法对非数字属性进行动画处理。(例如,可以对宽度、高度或左侧进行动画处理,但不能对背景颜色进行处理。)
你无法对添加/替换背景图片进行动画处理。URL 要么存在,要么不存在,没有中间状态。
$(this).animate({
opacity: 0
}, 100, function() {
// Callback
$(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
// Callback of the callback :)
$(this).animate({
opacity: 1
}, 600)
});
});
<div id="bgDiv" style='display:none;background:URL("Water lilies.jpg");position:fixed; width: 100%; height: 100%; z-index: -1'></div>
<script type="text/javascript">
$(document).ready(function(){
$('#bgDiv').toggle(1000); //You can plugin animate function here.
});
</script>