Question

以下脚本在停止之前会使类'closeBox'在fadin中多次出现（就像某种动画一样）。我只需要它一次淡出它。

.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

你似乎是多次绑定对象。你应该在重新绑定之前对点击事件进行.unbind。

Answer 2

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

阶级淡出问题

2 个答案: