动画(jQuery)背景色不使用滚动功能
动画(jQuery)背景色不使用滚动功能
提问于 2017-10-04 11:16:05
我将在带有滚动功能和动画()的背景颜色菜单上进行平滑转换。但是它不起作用，尽管其他属性，比如改变宽度--现在我使用的是work...For方法--但是目标是“淡出”effect...can --有人告诉我怎么了？我已经搜索过，其他的解决方案也不起作用(即使是悬停函数.)守则：
联署材料：
$(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;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-10-04 11:25:49
一个解决方案是css3。您可以使用transition通过addClass和removeClass使背景颜色平滑，从而使用jquery切换css类。
$(window).scroll(function() {
var top = $(window).scrollTop();
if (top > 0) {
$('.menu').addClass('newColor');
} else {
$('.menu').removeClass('newColor');
}
});如果需要，可以包括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
Stack Overflow用户
发布于 2017-10-04 11:26:13
动画属性和值
所有动画属性都应该动画为单个数值，除非如下所述；大多数非数字属性不能使用基本的jQuery功能进行动画(例如，宽度、高度或左侧可以动画，但背景色不能动画，除非使用jQuery.Color插件)。
$('.menu').animate({backgroundColor:"#383737"}, 1000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46563459
复制相关文章
相似问题
腾讯云开发者
