Question

哪们大神帮我看看这个jquery代码问题出在哪

页面滚动只执行第一个条件，换另一个条件要半天才会反应。然后背景颜色也不会改变。哪位大神可以帮我看一下了。谢谢了
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script type="text/javascript" src="jquery.animate-colors.js"></script>
<script>
$(function() { var winWidth=$(window).width(); $(window).scroll(function(){ var top = $(document).scrollTop(); if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 if (!window.ActiveXObject) { // Mozilla,Safari, } else {} } else { $(".abc").css("top",top); } if(top >= 300) { $(".abc").animate({ backgroundColor:'#ccc', left:'100px', width:'400px' },"slow"); } else { $(".abc").animate({ left:'10px', width:'800px' },"slow") }; });});
</script>

Answer 1

你的代码有很多问题，就你提出的问题
第一半天才反应：是因为浏览器对滚动处理的方式不同，当你在连续滚动之后，这中间会有一个时间间隔，当过了这个时间间隔的时候浏览器才会处理脚本的语句，还有就是和浏览器的性能有管
第二背景没效果：是因为你都没有指定它变成什么背景，当然没反应

Answer 2

你的代码逻辑有明显的问题，scroll事件会多次触发执行回调函数。

这样就导致当滚动大于/小于300时，多次触发动画函数。

你应该思考下，增加一个状态控制器

$(function() {
    var winWidth = $(window).width();
    var status = 0; // 控制状态
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (window.XMLHttpRequest) { //Mozilla, Safari,IE7
            if (!window.ActiveXObject) { // Mozilla,Safari,
            } else {

            }
        } else {
            $(".abc").css("top", top);
        }
        if (status === 0 && top >= 300) { // scroll
            status = 1; // 状态变更
            
            $(".abc").animate({
                backgroundColor: '#ccc', left: '100px', width: '400px'
            }, "slow");
        } else if (status !== 0 && top < 300) {
            status = 0; // 状态变更
            
            $(".abc").animate({
                left: '10px', width: '800px'
            }, "slow");
        }
    });
});

追问

我明明有导入背景颜色动画插件，为什么背景颜色改变语句必须注释掉代码才能正常运行？

追答

这个我就不知道了。。