在背景jQuery中淡出 | 在背景jQuery中淡出

本文介绍了在背景jQuery中淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试淡化网站背景上的某些图像，但无法正常工作T_T.预先感谢！

I'm trying to fade some images on the background of my site but isn't working T_T .Thanks in advance !

HTML:

<body>
    <div id="menu1"></div>
    <div id="menu2"></div>
    <div id="menu3"></div>
</body>

CSS:

body {
    background-color: #1f304e;
    background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center 0px;
}

JQuery:

$('#menu1').click(function(){
    $(body).animate({background : url('images/bg1.jpg') }, 600);
});
$('#menu2').click(function(){
    $(body).animate({background : url('images/bg2.jpg') }, 600);
});
$('#menu3').click(function(){
    $(body).animate({background : url('images/bg3.jpg') }, 600);
});

推荐答案

您不能直接为元素的背景图像属性设置动画.不过，您可以淡入整个元素，因此请尝试创建一个包含图像的div并将其淡入.

You cannot directly animate the background image property of an element. You can fade in an entire element though, so try to create a div that contains the image, and fade that in.

尝试用div模仿背景:

Try to mimic the background with a div instead:

CSS:

#bg {
  background-color: #1f304e;
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-position: center 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

HTML:

<body>
  <div id="bg"></div>
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</body>

JavaScript:

Javascript:

$('#menu1').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg1.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
});
$('#menu2').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg2.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
});
$('#menu3').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg3.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
});

这将淡出背景，交换图像，然后将其淡入.如果要进行适当的淡入淡出，则背景中至少需要两个div.

This will fade out the background, swap the image, then fade it back in. If you want a proper crossfade, you will need at least two divs in the background.

这篇关于在背景jQuery中淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！