javascript - onmouseout抖动的问题

Question

http://jsfiddle.net/vf5c0az7/

呃，代码在这里面，是个渣，莫怪莫怪
怎么让它滑出的时候，正常关闭slide层

Answer 1

先是清除需要指定清除哪个：clearInterval(intervalID), intervalID 是创建的时候返回的。

然后你这么写如果我在上一个动画结束前触发了下一个动画，那之前的 timer 岂不是就被覆盖了，然后就不停的加加减减。

Answer 2

JS代码

javascript            function tool(cover){
                var hidding = false;
                var pcover = function(){
                    hidding = false;
                    setTimeout(function(){
                        if(!hidding){
                            if(cover.offsetHeight<150){
                                cover.style.height = cover.offsetHeight + 1;
                                // 递归保证上一次执行完再执行pcover()->相当于同步, 而不是异步的for循环setTimeout
                                pcover();
                            }else{
                                hidding = !hidding;
                            }
                        }
                    }, 10);
                }
                var pcoverhide = function(){
                    hidding = true;
                    setTimeout(function(){
                        if(hidding){
                            if(cover.offsetHeight>0){
                                cover.style.height = cover.offsetHeight - 1;
                                pcoverhide();
                            }else{
                                hidding = !hidding;
                            }
                        }
                    }, 10);
                }
                return {
                    pcover: pcover, 
                    pcoverhide: pcoverhide
                }
            };

            // 1)
            (function(){
                var abp = document.getElementsByTagName('p');

                for (var i = 0; i < abp.length; i++) {
                    var cover = abp[i].firstChild;
                    console.log("cover: "+cover.getAttribute('id'));
                    var cc = tool(cover);
                    // 这里回调函数是通过一个函数执行来生成的, 因为javascript没有块作用域,
                    // 所以如果直接写成下面这样, 那么会形成闭包, 两次for引用同一个cc对象,
                    // 因为for循环执行完之后, 闭包引用变量的作用域同时指向了注释1)处的函数
                    //abp[i].addEventListener('mouseover', function(e){
                    //      cc.pcover();
                    //}, false);
                    abp[i].addEventListener('mouseover', (function(pcover){
                        return function(e){
                            pcover();
                        }
                    })(cc.pcover), false);

                    abp[i].addEventListener('mouseout', (function(pcoverhide){
                        return function(e){
                            pcoverhide();
                        }
                    })(cc.pcoverhide), false);
                }
            })();

或者

javascriptfunction tool(cover){
                var hidding = true;

                setInterval(function(){
                    if(!hidding && cover.offsetHeight<150){
                        cover.style.height = cover.offsetHeight + 1;
                    }else if(hidding && cover.offsetHeight>0){
                        cover.style.height = cover.offsetHeight - 1;
                    }
                }, 10);

                return {
                    hide: function(){
                        hidding = true;
                    }, 
                    show: function(){
                        hidding = false;
                    }
                }
            };

            (function(){
                var abp = document.getElementsByTagName('p');

                for (var i = 0; i < abp.length; i++) {
                    var cover = abp[i].firstChild;
                    console.log("cover: "+cover.getAttribute('id'));
                    var cc = tool(cover);
                    abp[i].addEventListener('mouseover', (function(show){
                        return function(e){
                            show();
                        }
                    })(cc.show), false);

                    abp[i].addEventListener('mouseout', (function(hide){
                        return function(e){
                            hide();
                        }
                    })(cc.hide), false);
                }
            })();

Answer 3

在函数 pcover和pcoverhide 内添加 clearInterval(timer);
既在执行该函数时停止 timer

function pcover(cover){
    clearInterval(timer); 
    timer = setInterval(function(){},10)
}

Answer 4

这个动画代码还有个问题就是在span完全或部分cover后 经过span移出会触发span的mouseover和mouseout，由于事件冒泡等同于又触发了setInterval 这样就丢失了之前setInterval的timer引用 造成了无法clear

不考虑兼容的话用CSS3的transition代替setInterval来做动画会方便许多