我不知道我做错了什么。这工作得很好:
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
//console.log('Down');
$(".spacer_top_panel").css({"height": "90px"});
$(".spacer_top_panel nav").css({"margin": "15px auto"});
} else {
//scroll up
//console.log('Up');
$(".spacer_top_panel").css({"height": "140px"});
$(".spacer_top_panel nav").css({"margin": "45px auto"});
}
});
但是,当我将 .css 更改为 .animate 时,它仅在向下滚动时有效,但再次向上滚动时对象不会设置动画。
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
//console.log('Down');
$(".spacer_top_panel").animate({height:'90px'});
$(".spacer_top_panel nav").animate({margin:'15px auto'});
} else {
//scroll up
//console.log('Up');
$(".spacer_top_panel").animate({height:'140px'});
$(".spacer_top_panel nav").animate({margin:'45px auto'});
}
});
知道我在这里做错了什么吗?我想问题很明显,但我看不到。 感谢帮助。
最佳答案
使用stop();
中断一个动画并切换到另一个
$('body').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
//console.log('Down');
$(".spacer_top_panel").stop().animate({height:'90px'});
$(".spacer_top_panel nav").stop().animate({margin:'15px auto'});
} else {
//scroll up
//console.log('Up');
$(".spacer_top_panel").stop().animate({height:'140px'});
$(".spacer_top_panel nav").stop().animate({margin:'45px auto'});
}
});
关于javascript - 鼠标滚轮绑定(bind)上的 JQuery animate(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20090572/