【前端教程】防止layer.tips闪烁

问题

由于使用mouseover事件会在每一次鼠标移入时触发,当前一个tips未关闭时移入鼠标会造成tips位置的移动,如下图。

问题演示

使用的代码

$('.loginin').mouseover(function(){
    var that = this;
    layer.tips('您好,您已登录!', that,{
        tips: 3,
        end:function(){
            $('.tiping').removeClass('tiping');
        }
    });
});

解决方法

在显示tips的元素上添加一个tiping类,当tips销毁时删除。显示tips时,只要检测到有该类便不显示

优化代码

$('.loginin').mouseover(function(){
    if(!$(this).hasClass('tiping'))
    {
        $(this).addClass('tiping');
        var that = this;
        layer.tips('您好,您已登录!', that,{
            tips: 3,
            end:function(){
                $('.tiping').removeClass('tiping');
            }
        });
    }
});

最终效果

本文章由lvshujun原创,转载请联系作者并写明页面链接(https://cszj.wang/1460.html
暂无评论

发送评论 编辑评论

|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇