Jquery动画导航颜色答案

【问题标题】：Jquery animate navigation colorJquery动画导航颜色
【发布时间】：2015-02-03 03:15:36
【问题描述】：

您好，我目前正在制作一个网站，但在为导航栏设置动画时遇到问题。

我希望导航栏最初是透明的，而不是在某个 div 之后更改背景颜色。我已经这样做了，但希望背景颜色淡入，而不仅仅是出现。下面是 HTML 和 Jquery。

如何使它淡化为背景色？

HTML

<div class="nav">
      <div class="container">
       <div class="logo">
       <a href="#"><img src="RepublicSquare_logo.svg" style="height: 80px;"></a>
       </div>
        <div class="navMain">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

Jquery

<script>

  $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#c-title');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.nav').css('background-color', 'rgba(34,34,34,0.9)');
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
});
</script>

感谢您抽出宝贵时间回答问题。（我希望问题很清楚，如果不让我知道）

【问题讨论】：

你能做一个jsfiddle吗？ => JSFIDDLE
@Godisgood 当然，我现在就这么做。
@user3218008 所以这里的一切都准确地改变了background-color，但你希望从transparent 到rgba(34,34,34,0.9) 的变化淡入？
@Godisgood 是的，这是正确的。一开始它是透明的，一旦它通过向下滚动页面到达#c-title，它应该淡入rgba（34,34,34,0.9）
@user3218008 如果 Mohamed-Yousef 的解决方案有效，请接受他的回答作为解决方案。

标签： jquery html background-color fade nav

【解决方案1】：

在您的 CSS 中使用此代码

.nav{
    transition-duration: 2s;
}

DEMO

【讨论】：

这只是触发改变颜色的标题元素。
如果您的代码已经在工作.. 只需添加 transition-duration: 2s;到你的 .nav 类
愚蠢的问题，但你是怎么做到的？
transition-duration 属性指定过渡效果需要多少秒 (s) 或毫秒 (ms) 才能完成。在演示中，我假设您在顶部有一个 div，并希望在滚动隐藏此 div 后更改 nav bgcolor ..对吗？所以如果在红色 div 的高度之后滚动采取行动，我就编写了我的代码.. 就是这样

【解决方案2】：

jQuery 的fadeIn() 不适合这种类型的使用。它淡入匹配的元素，而不是特定的属性。正如其他人所提到的，您可以使用animate()，但从documentation，您会看到background-color 不是属性之一，除非使用插件：

所有动画属性都应动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的 jQuery 功能（例如，宽度、高度、 or left 可以设置动画，但 background-color 不能设置，除非使用jQuery.Color()插件）

【讨论】：

【解决方案3】：

<script>

  $(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#c-title');
   var offset = startchange.offset();
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.nav').animate({background-color: rgba(34,34,34,0.9)}, 1000);
       } else {
          $('.nav').css('background-color', 'transparent');
       }
   });
});
</script>

【讨论】：

也许现在就试试...没有 qoute
不，那没用。你知道我可以使用的任何其他选项吗？

【解决方案4】：

尝试使用 JQuery 内置的 animate() 函数。像这样：

$('yourDiv').animate({"color" : "red"},500);

这将褪色而不是仅仅改变它。

【讨论】：

我试过了，但没用。你的意思是这样的： $(document).ready(function(){ var scroll_start = 0; var startchange = $('#c-title'); var offset = startchange.offset(); $(document).scroll (function() { scroll_start = $(this).scrollTop(); if(scroll_start > offset.top) { $('.nav').animate({"color" : "red"},500); } else { $('.nav').css('background-color', 'transparent'); } }); });
是的，这将确保网站在发生任何事情之前完全加载。