Jquery 类fadeIn问题

下面的脚本使类“closeBox”在停止前几次淡入（类似于某种动画）。我只需要把它淡入一次

.box-holder div{
    background-color:#CCC;
    width:240px;
    height:240px;
    position:absolute;
    top:0;
    cursor:pointer;
}

.closeBox{
    display:none;
    margin: 0;
    position: absolute;
    right: 10px;
    top: 10px;
}

.box-1{
    right:600px;
}

.box-2{
    right:310px;
}

.box-3{
    right:20px;
}
        <div class="box-holder" >
           <div class="box-1"
           data--50-top="right:600px;"
           data--300-top="right: -570px;"
           data-anchor-target="#slide-1 h2"
           ></div>
           <div class="box-2"
           data--50-top="right:310px;"
           data--300-top="right: -570px;"
           data-anchor-target="#slide-1 h2"
           ></div>
           <div class="box-3"
           data--50-top="right:20px;"
           data--300-top="right: -570px;"
           data-anchor-target="#slide-1 h2"
           ><p class="closeBox">X</p></div>
        </div> 

        $(document).ready(function(e) {

            var scrolling = $window.scrollTop();

            function update(){
                var boxHolderDivRight = $('.box-holder div').css('right'),
                    boxHolder = $('#slide-1 .box-holder'),
                    boxHolderDiv = $('.box-1, .box-2, .box-3'),
                    closeBox= $('.closeBox');

                    boxHolderDiv.click(function(){
                        if(boxHolderDiv.css('right') == -570+'px'){
                            boxHolderDiv.addClass('clicked');
                            closeBox.fadeIn();
                        }
                        else if(boxHolderDiv.css('right') == -300+'px' && boxHolderDiv.hasClass('clicked')){
                            boxHolderDiv.removeClass('clicked');
                            closeBox.fadeOut();
                        }
                    });


            }

            $window.bind('scroll', update);// JavaScript Document

        });

.box holder div{
背景色：#CCC；
宽度：240px；
高度：240px；
位置：绝对位置；
排名：0；
光标：指针；
}
.衣柜{
显示：无；
保证金：0；
位置：绝对位置；
右：10px；
顶部：10px；
}
.框-1{
右：600px；
}
.方框-2{
右：310px；
}
.方框-3{
右：20px；
}
X
$（文档）.ready（函数（e）{
var scrolling=$window.scrollTop（）；
函数更新（）{
var boxHolderDivRight=$（'.box holder div'）.css（'right'），
盒子架=$（“#幻灯片-1.盒子架”），
boxHolderDiv=$（'.box-1、.box-2、.box-3'），
closeBox=$（'.closeBox'）；
boxHolderDiv.单击（函数（）{
if（boxHolderDiv.css（'right'）==-570+'px'）{
boxHolderDiv.addClass（'clicked'）；
closeBox.fadeIn（）；
}
else if（boxHolderDiv.css（'right'）==-300+'px'&&boxHolderDiv.hasClass（'clicked'））{
boxHolderDiv.removeClass（'clicked'）；
closeBox.fadeOut（）；
}
});
}
$window.bind（'scroll'，update）；//JavaScript文档
});

您似乎多次绑定对象。您应该这样做。在重新绑定之前取消对click事件的绑定。

将一个事件处理程序绑定到另一个事件处理程序中通常是错误的，因为除非您注意先删除旧的事件绑定，否则您将获得多个事件绑定。您应该只在顶级绑定第二个处理程序一次。如果它需要依赖于第一个处理程序中的某些内容，请让第一个处理程序设置第二个处理程序检查的变量。如果您的第一个处理程序动态创建元素或移动类，则可以将委派与

.on（）

一起使用，使处理程序自动跟踪这些更改。如果只想启用和禁用单击输入元素，可以添加和删除其

disabled

属性。但是，如果隐藏元素，则不需要执行此操作——用户无法单击他们看不到的内容。

为什么要在滚动事件handler中注册单击处理程序？这是原因吗？谢谢是的，每次调用滚动事件时，新的单击处理程序都会被注册。我看不出有任何需要滚动处理程序的地方。。。尝试只在关闭框上注册一次处理程序。当它淡出时，用户将无法单击它。