在导航栏上切换不透明度动画
Toggle opacity animation on nav bar
目标:当到达滚动上的某个位置时,给导航栏不透明度。到目前为止,它在加载时工作,但当向上滚动时,不透明度不会回到0。
function navanim() {
var window_top = $(window).scrollTop();
var div_top = $('#news').offset().top;
if (window_top > 500)
$('.nav').animate({
'opacity': '1'
}, 500);
else
$('.nav').css("opacity", 0);
}
$(function() {
$(window).scroll(navanim);
navanim();
});
玩过你的代码后,问题似乎与animate、css和其他可能被频繁调用的方法有关(每次滚动)。
我根据你的想法重新实现了一个小例子:
的简单示例
上面的jsfiddle使用以下函数通过跟踪状态来检查动画是否必要,如果需要,则执行该动画。
var navAnimation = (function() {
var news = $('#news'),
header = $('header'),
winTop = $(window).scrollTop(),
newsTop = news.offset().top,
show = winTop < newsTop;
return function navAnimation () {
winTop = $(window).scrollTop(),
newsTop = news.offset().top;
// Don't run uneccissarily
if (show && winTop < newsTop) return;
if (!show && winTop >= newsTop) return;
// If something changed, update our state
show = winTop < newsTop;
if (show) {
console.log('animate!');
header.animate({
opacity: 1
}, 500);
} else {
header.animate({
opacity: 0
}, 500);
}
};
})();
$( document ).ready(function(){
$( window ).scroll(navAnimation);
navAnimation();
});
相关文章:
- Greenstock不透明度动画从0到1再返回
- 设置1400个Raphael.js对象的不透明度动画会影响动画性能
- 悬停不起作用时对不透明度更改进行动画处理
- jQuery淡入淡出/动画不透明度到不同的显示类型,然后阻止
- 在Raphael JS中,不透明度:0和开始动画到不透明度:1之间的延迟
- jQuery动画仅在动画期间更改不透明度
- JQuery 悬停函数不透明度动画
- 与其他变换函数异步制作不透明度动画
- AngularJS中的CSS不透明度动画
- 在导航栏上切换不透明度动画
- Jquery/Javascript不透明度动画滚动
- 延迟关键帧每定义的时间,并保持不透明度0动画后
- 输入字段值不透明度动画
- 不透明度动画应该很容易?(javascript)
- 如何停止多个不透明度动画队列?(jQuery)
- 如何重置a帧光标的不透明度动画
- Ng展示摆动DOM不透明度动画
- Jquery传输不透明度动画冲突
- CSS z-index在不透明度动画期间改变
- 为什么图像不透明度动画在Firefox和Chrome中运行顺畅,但在Safari中却不行