Jquery在滚动上动画div不透明度

Posted 2023-05-08

【中文标题】Jquery在滚动上动画div不透明度

【英文标题】：Jquery animate div opacity on scroll

【发布时间】：2013-06-26 11:50:04

【问题描述】：

所以我正在尝试基于滚动浏览器窗口来为 css 属性设置动画。 下面的代码到目前为止工作，但我希望它有一个过渡，而不是突然从不透明度 1 到不透明度 0.5。任何帮助表示赞赏。提前致谢。

$(document).ready(function()
$(window).scroll(function()
    if ($(window).scrollTop() > 50)
        $('.header').css('background','rgba(200, 54, 54, 0.5)');
    
    else if ($(window).scrollTop() < 50)
        $('.header').css('background','rgba(200, 54, 54, 1)');
    
);

);

这是一个jsfiddle 到目前为止的代码链接

【参考方案1】：

你可以的

 $(window).scroll(function()
    if ($(window).scrollTop() > 50)
        $('.header').css('background','rgb(200, 54, 54)').stop().animate("opacity":".5",1000)
    
    else if ($(window).scrollTop() < 50)
        $('.header').css('background','rgb(200, 54, 54)').stop().animate("opacity":"1",1000)
    
);    

http://jsfiddle.net/XXjZW/2/

【讨论】：

谢谢。这段代码和下面的例子很好用，但它给我带来了另一个问题。如何通过影响标题 div 内的 h1 标签来设置背景不透明度的动画？

【参考方案2】：

你可以使用CSS3属性transition：

.header
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s;

【参考方案3】：

给你的 css 过渡 ->

transition:background 1s;

http://jsfiddle.net/XXjZW/6/

【参考方案4】：

如果你想兼容不支持 CSS3 的浏览器，我建议你使用 jQuery UI 库：

  $('.header').animate(
      backgroundColor: "#aa0000"
  , 1000);

活生生的例子：http://jsfiddle.net/XXjZW/8/

您需要在包含 jQuery 库时包含它：

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>