jQuery在滚动到不工作位置时设置动画

我正在使用来自的一些代码，但由于某些原因，我似乎无法使其工作

当页面滚动到此元素时，我希望此元素将不透明度从0更改为1，但无论出于何种原因，它似乎不起作用。该元素从页面顶部向下大约为2000px

$（文档）.ready（函数（）{
/*每次滚动窗口时*/
$（窗口）。滚动（函数（）{
/*检查每个所需元件的位置*/
$（'.animate'）。每个（函数（i）{
变量bottom\u of_object=$（this.offset（）.top+$（this.outerHeight（）；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
/*如果对象在窗口中完全可见，则淡入淡入*/
if（窗口的底部>对象的底部）{
$（this.animate（{'opacity'：'1'}，500）；
};
}); 
});
});
正文{
高度：2200px；
}
#圈{
背景：#bf1e2c；
宽度：300px；
高度：300px；
边界半径：100%；
位置：绝对位置；
顶部：25px；
}
.制作动画{
不透明度：0；
}
您错过了您的结帐日期
}）用于文档就绪包装器

$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.animate').each( function(i){

            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it in */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });
});

您需要滚动到该项目以使其显示

示例小提琴不工作：

小提琴工作示例：
这是因为我在html和正文上设置了
overflow-x:hidden

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

当我注释掉
overflow-x:hidden时，它会工作
啊，该死，忘了在问题中粘贴这个。刚刚修复。从堆栈溢出答案中得到答案：