Question

我希望背景图片在“点击”中淡出，这就是我现在所拥有的。它工作正常，但我希望图像在点击时淡入...

$(document).ready(function() {
//this represents window.load in javascript.

//now to select the element suppose you have anchor tag <a> with id=clickme

$("#test").click(function() {

//select the element whose background image you want to change. suppose with id=imgBack
$("body").css({'background-image':'url(url to image)'}); 


})
});

Answer 1

您需要创建一个div，并在那里设置背景图像，然后将其设置为display：none;

然后在你的点击功能上执行此操作

$('#wrapperdiv').fadeIn();

在fadeIn（）函数中，您可以传入一个数字，告诉它您希望它以多快的速度淡入（以毫秒为单位），因此如果您希望它动画400毫秒，您可以像这样写.fadeIn（400） ;

Answer 2

这是live example。

HTML：

<body>
  <div id="no_background"></div>
  <div id="wrapper">
    <!-- page content goes here -->
    <input type="button" id="test" value="Show background">  
  </div>
</body>

CSS：

body {
  background: url(/path/to/background.png);
}

#no_background {
  background: white;    
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#wrapper {
  position: relative;
  z-index: 2;
}

JS：

$("#test").click(function() {
  $("#no_background").fadeOut();
});

JQuery，点击背景图片淡入淡出

2 个答案: