Question

我尝试使用滚动功能和animate（）在背景颜色菜单上进行平滑过渡。但是它不起作用，虽然其他属性如改变宽度确实有用......现在我使用css方法，目标是＆＃34;淡入淡出＆＃34;效果......谁能告诉我有什么问题？我已经搜索过，其他解决方案也无法使用（即使使用悬停功能......）代码：

JS：

 $(window).scroll(function () {
    var top = $(window).scrollTop();

    if (top > 0) {
        //this line works
       $('.menu').css('opacity','0.7').css('background-color','#383737');

       //but not this one:

     $('.menu').animate({"background-color":"#383737"}, 1000);


    } 
})

CSS：

.menu{
    top:0;
    width: 100%;
    font-size: 4vw;
    text-align: center;
    background-color: #ED1847;
    z-index: 1;
    color:black;
    position:fixed;
}

Answer 1

动画属性和值

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

$('.menu').animate({backgroundColor:"#383737"}, 1000);

Answer 2

解决方案是css3。您可以使用transition通过addClass和removeClass平滑背景颜色，以使用jquery切换css类。

 $(window).scroll(function() {
   var top = $(window).scrollTop();
   if (top > 0) {
$('.menu').addClass('newColor');
   } else {
$('.menu').removeClass('newColor');
   }
 });

<强> JSFiddle

如果需要，您可以加入jquery ui库并使animate工作。

 $(window).scroll(function() {
   var top = $(window).scrollTop();

   if (top > 0) {
$('.menu').stop(true, true).animate({
        backgroundColor: '#ED1847'
    })
   } else {
$('.menu').stop(true, true).animate({
        backgroundColor: '#383737'
    })
   }
 });

<强> JSFiddle

Animate（jQuery）背景颜色不适用于滚动功能

2 个答案: