终极解决:JQ jquery 在使用 animate 的时候出现抖动情况,Chrome、IE都会出现这个问题
啥都不说,先上代码。
var scrollBool = false;
var animate_time = 0;
$(window).scroll(function () {
if ($(this).scrollTop() >= 200) {
if (!scrollBool && animate_time == 0) {
animate_time = 1;//关键:设置为1,防止再次进入动画
$(".header").stop().animate({
"height": "80px"
}, 200);
$(".crumbs").stop().animate({
"padding-top": "80px"
}, 200);
scrollBool = true;
setTimeout(function () {
animate_time = 0;
}, 210);
}
} else {
if (scrollBool && animate_time == 0) {
animate_time = 1;//关键:设置为1,防止再次进入动画
$(".header").stop().animate({
"height": "120px"
}, 200);
$(".crumbs").stop().animate({
"padding-top": "120px"
}, 200);
scrollBool = false;
setTimeout(function () {
animate_time = 0;
}, 210);
}
}
});
以上代码就是在鼠标滚动时,收起菜单、展开菜单的动画。原来会有抖动的情况,加了stop(),仍然没有用。
$(".crumbs").stop().animate();//没有卵用
分析不就是动画还没结束前,又触发新的动画,导致的不停在动画过程之中,于是就想到了两个方法。
1、在animate的回调方法中再调用第二个动画。(selector).animate({styles},speed,easing,callback) //有效果但不能完全解决。
2、直接使用setTimeout,这个时间略大于动画的时间,这个保证这个动画没结束前,绝对不会出现再次进入的情况。
------------------------------------------
划重点 --- 关键代码如下:
var animate_time = 0;//为0时才允许动画
if(animate_time == 0){
animate_time = 1;
$(".header").stop().animate({"height":"80px"},200);
$(".crumbs").stop().animate({"padding-top":"80px"},200);
setTimeout(function(){animate_time = 0;},210);//动画时间是200ms, 210ms后才允许再次运行动画
}
这个方法亲试能彻底解决 jquery 在使用 animate 的时候出现抖动情况,Chrome下测试完全没问题,哈哈!!!!