0

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

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


})
});
4

2 回答 2

1

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

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

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

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

于 2012-05-10T14:50:08.540 回答
0

这是现场示例。

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();
});
于 2012-05-10T15:07:19.280 回答