jquery - 类淡入问题

Question

以下脚本使类“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

        });

Answer 1

将一个事件处理程序绑定(bind)到另一个事件处理程序中通常是错误的，因为您将获得多个事件绑定(bind)，除非您注意先删除旧的事件绑定(bind)。您应该只在顶层绑定(bind)一次第二个处理程序。如果它需要依赖于第一个处理程序中的某些内容，请让第一个处理程序设置第二个检查的变量。如果您的第一个处理程序动态创建元素，或四处移动类，您可以使用委托(delegate)和 .on() 让处理程序自动遵循这些更改。如果您只想启用和禁用点击输入元素，您可以添加和删除其 disabled 属性。但如果您隐藏该元素，则无需执行此操作——用户无法点击他们看不到的内容。