Question

嗨，我现在正在制作一个网站，我在动画导航栏时遇到了麻烦。

我希望导航栏最初是透明的，而不是在某个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>

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

Answer 1

<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>

Answer 2

尝试在animate()函数中使用JQuery的构建。像这样：

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

这会淡化颜色，而不仅仅是改变颜色。

Answer 3

在你的css中使用这段代码

.nav{
    transition-duration: 2s;
}

DEMO

Answer 4

jQuery的fadeIn()不适用于此类用途。它在匹配元素中淡化，而不是特定属性。正如其他人所提到的，您可以使用animate()，但是从documentation开始，除非使用插件，否则您会看到background-color不是其中一个属性：

所有动画属性都应设置为单个数值，除非如下所述;大多数非数字属性不能使用基本jQuery功能进行动画处理（例如，宽度，高度，或左边可以动画，但背景颜色不能，除非使用jQuery.Color()插件）

Jquery动画导航颜色

4 个答案: