Question

当我点击导航栏中的链接时，我有一个可以更改文档背景图像的工作代码。背景图像立即变化，没有动画。我怎样才能制作新的背景图片fadeIn（）; ？

JS

$('.navigation a').click(function() {
    currentBg = $(this).attr('href').replace('#', '') +'.jpg';
    $('.background').css({'background-image':'url(images/skins/'+currentBg+')'});
});

Answer 1

我不相信你可以，唯一的方法（我知道）将有一个块元素（例如div），它具有背景并且显示在你的其他内容后面（绝对定位）和淡化，而不是切换背景。

Answer 2

您无法为背景图像设置动画，从而更改其不透明度。

可能您可以在不同的部分拥有所需不透明度的图像，然后为背景位置设置动画，以便它提供fadeIn行为。

看看这个link它会对你有帮助。

Answer 3

不可能淡化背景图像，你必须创建一个容器并设置其背景图像，让它淡入淡出。

Answer 4

之前我做过类似的事情，将前景图像浮动在背景图像上的一个单独的div上，你想要“淡入”然后在前景图像上创建一个jquery淡出效果。

您可以使用类似的技巧在半透明的“背景”上设置纯文本。

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

Answer 5

我同意int0x90。

你可以做的是：

将图像堆叠成div，样式位置绝对，每个图像位置的样式绝对
为div设置ID
添加一个活动的类，其z-index为10
将div z-index中的所有非活动图像设置为0
您可以使用z-index将具有最高z-index的图像拉到堆栈顶部
将类激活添加到导航栏链接的单击，并从上一次单击中删除此类，以便将图像的z-index设置回0并且不会被覆盖。
在jquery中，您现在可以使用不透明度更改和更改速度

希望这有助于您入门！

Answer 6

正如许多人已经说过的那样，除非你使用块元素作为背景，否则这是不可能的。但是如果你只想要一个动画，那么你可以将.gif作为背景，然后当它的动画完成后用真实的Image替换它，这样.gif就不会自己迭代了

fadeIn点击背景图片

6 个答案: