如何使用jQuery动画更改背景图片？

我想用缓慢的动画来更改背景图片，但它不工作如何使用jQuery动画更改背景图片？

$('body').stop().animate({background:'url(1.jpg)'},'slow');

有什么错的语法！

来源

2011-01-07 getaway

什么是不工作？速度还是其中的任何一点？ – 2011-01-07 22:48:26

现在图像不出来！当我点击功能事件！ – getaway 2011-01-07 22:49:09

您可以通过将图像不透明度淡入0来获得类似效果，然后更改背景图像，最后再次将图像淡入。

这将需要一个div，在页面上与身体一样宽的所有其他页面之后。

<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}); 
    });

你可以得到更多的交叉作用，通过使在这一个，然后你就可以在褪色上的第二背景股利。

来源

2011-01-07 22:51:49

从jQuery文档：

性质是非数字不能使用基本的jQuery 功能进行动画处理。（例如，宽度，高度，或左可以是动画但背景颜色是不可能的。）

来源：

来源

2011-01-07 22:48:54

实际上背景颜色可以是动画！ ive试过了 – getaway 2011-01-07 22:51:11

@getaway使用jQuery UI？或者一些插件？ – 2011-01-07 22:52:14

不能动画加法/更换背景图像的。该URL是否存在或不存在。状态之间没有。

来源

2011-01-07 22:49:08 user113716

实现这可能是的onclick添加的方式带有背景图像的新课程。然后为此添加动画？或淡出图像以揭示新图像？

来源

2011-01-07 22:52:17 diagonalbatman

我会用一个虚假的div来掩盖背景作为固定部件，然后动态显示元素即：

<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>

来源

2011-01-07 23:01:19 Chandu

这是我如何做的：

$(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) 
    });  
});

来源

2016-07-06 09:29:06 yPhil

如何使用jQuery动画更改背景图片？

回答

相关问题