pc端hover事件 移入pop间隔时间处理

来源:互联网 发布:阿拉伯人 性 知乎 编辑:程序博客网 时间:2024/06/13 12:47

问题描述:
一个按钮,hover触发弹层跟随显示事件,来回在两个目标点移动,弹层来回消失出现问题
解决思路:
加一个定时器,在鼠标移出这个按钮和弹层一定事件后再触发关闭弹层事件;
代码如下

.hide{    display: none;}<a class="j_button"></a><div class="pop hide" ></div>var init = new Object({        init: function() {            var _this = this;            _this.pop(); //按钮        },        pop: function() {            var _btn = $('.j_button'),                _btimer;            _btn.hover(function() {                if (_btimer) {                    clearTimeout(_btimer);                    $(_btn).next().addClass('hide');                }                $(this).next().removeClass('hide');            }, function() {                var _this = this;                _btimer = setTimeout(function() {                    $(_this).next().addClass('hide');                }, 500);            });            $('.j_button').next().hover(function() {                if (_btimer) {                    clearTimeout(_btimer);                }            }, function() {                var _this = this;                _btimer = setTimeout(function() {                    $(_this).addClass('hide');                }, 500);            });        }    });    init.init();
原创粉丝点击