jQuery：向下滑动并以特殊方式将一个背景图像替换为另一个背景图像答案

【问题标题】：jQuery: slide down and replacing one background image with another one in a special mannerjQuery：向下滑动并以特殊方式将一个背景图像替换为另一个背景图像
【发布时间】：2012-08-13 06:58:51
【问题描述】：

这是一个代码jsFiddle。

有 2 张图片：新的（现代的）一张和旧的一张。在我的示例中，当您按下链接“单击此处向下滑动”时，所有内容都会正确向下滑动（尽管我没有拉伸图像以使它们彼此适合，这只是一个示例）。

但是，我希望新图像（现代）没有滑落，而是被旧图像（由旧谷歌）顺利替换。例如，当滑块位于页面中间时，该滑块上方会出现一半旧 Google，而该滑块上方会消失一半现代 Google。那时，现代图像的下部仍在滑块下方。结果，如果图像包含相同的文本，彼此适合，但颜色不同，则您可以在滑动的任何时候从该图像中读取整个文本。我希望我解释得当。

【问题讨论】：

标签： jquery html css slider uislider

【解决方案1】：

这就是你想要的。

背景图片应保持原位，因此 div 与底部对齐。

http://jsfiddle.net/uniisland/9h58G/1/

【讨论】：

对不起，绿色框，滑块应该像它们一样向下滑动。但是，图像应该从顶部消失 - 它不会移动，而是从顶部边框消失。请参阅我的问题中的解释。谢谢。
@Haradzieniec 我明白了。现在我明白你的意思了。等一下。
哇，看起来很完美。谢谢。但是，它在 FF-perfect、Chrome-perfect、Opera-perfect 和 IE 中进行了测试。 IE 不起作用（根本不会向下滑动）。在 IE 8.0 中测试。
@Haradzieniec 哪个部分不动？还是什么都不动？
@Haradzieniec 我不确定这里出了什么问题。 js和css规则其实很简单。确保您了解它的工作原理，并在您自己的网站上测试它的浏览器兼容性。因为 jsfiddle 包含 iframe 和其他复杂性。

【解决方案2】：

我不确定是否是一个解决方案，但是：

我已经将 body css 包裹在一个 div 中：

<div id="bg"></div>

#bg{
     height: 100%;
     width: 100%;
     background-color: #d1e3ec;
     background-image: url(http://googlechrometutorial.com/images/google-chrome-home.jpg);
     background-repeat: no-repeat;
     background-position: top center;
     position: absolute;
}

然后我们可以使用动画不透明度（或其他淡入淡出...）：

 $('#bg').css('opacity', 0);
 $('#slide-link').click(function(){

 var hid = $('#sliderWrapper').is(':hidden')            
 $(this).animate({ top: (1-hid)*($(window).height()) },1500)
      if(hid) {
           $('#bg').animate({'opacity':0}, 1000);
           $('#sliderWrapper').stop().show("slide", { direction:"down" }, 1500);
      } else {
           $('#bg').animate({'opacity':1}, 1000);                                
           $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 1500); 
      }          
 })

【讨论】：