文档章节

jq 解决 动画 淡入淡出,隐藏显示,多次操作BUG

之渊
 之渊
发布于 2016/11/26 17:24
字数 311
阅读 34
收藏 0

一般我们有动态的比如 一个 div 点击 其他一个 或者是 鼠标移动到另一个 div时候, 淡入淡出动画,或者是其他动画 。显示或者隐藏。 当然如果使用 CSS3动画那就更好了,那样BUG是没有的。

可是会发现如果我们操作比较频繁的时候,就会发现动画就一直在无脑执行,自动操作很多次。这不是我们想要的:

解决办法:

下面是一个  鼠标移动 移出 div   淡入淡出或者是隐藏 的效果例子 js部分:

//鼠标经过 标题显示 div 隐藏就隐藏

//鼠标移动事件 推荐使用 hover() 如果是其他事件容易出现BUG的
    $("#thingContent").hover(function(event) {
        //$("#thinkStandard").show();
        // event.preventDefault(); //这里不可以,连 基本效果都没有

        //event.stopPropagation(); 这个不行

        $("#thinkStandard").stop(true).fadeIn();
    }, function(event) {
        // $("#thinkStandard").hide();
        // event.preventDefault();
        //event.stopPropagation(); 

        // stop(true) 表示 停止所有的同级队列,如果不为ture 那么会将当前的动画执行完才会执行下去的
        $("#thinkStandard").stop(true).fadeOut(3000);
        // $("#thinkStandard").stop().fadeOut(3000); stop阻止同级别的事件

    });

详情请看 jq  stop() 方法和 hover 方法

© 著作权归作者所有

共有 人打赏支持
之渊
粉丝 11
博文 544
码字总数 158533
作品 0
佛山
程序员
私信 提问
【Animations】使用动画显示或隐藏视图(4)

原文 概要 在使用您的应用程序时,需要在屏幕上显示新信息,同时删除旧信息。立即切换显示的内容可能会显得很刺耳,或者用户可能很容易错过屏幕上的新内容。利用动画可以减缓变化并以概念吸引...

lichong951
05/28
0
0
jQuery动态效果学习笔记

资料来源 W3Cschool 1.元素的显示与隐藏 1.1显示元素show() 语法 $(selector).show(speed,callback); 显示已经设置隐藏的元素 1.2隐藏元素hide() 语法 $(selector).hide(speed,callback); 隐...

inw3cschool
2017/04/25
0
0
jquery的知识必记点---实现动画效果

1.动画的基础隐藏和显示 1)hide方法 $elem.hide() .hide("fast / slow") 2)show()方法 $('elem').hide(3000).show(3000) 3)隐藏切换toggle方法 如果元素是最初显示,它会被隐藏 如果隐藏的...

一只小YU儿
2017/04/20
0
0
jQuery

jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide(...

仇诺伊
2017/11/19
0
0
jQuery基础效果

jQuery基础效果 $(document).ready(function(){}这句话的意思是页面加载完成后执行, 等同于js中的window.onload,大家学了jQuery的话应该就会知道 $(document).ready(function(){//这行代码...

新网学会
2017/12/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

case when then

case具有两种格式。简单case函数和case搜索函数。 --简单case函数case sex when '1' then '男' when '2' then '女’ else '其他' end--case搜索函数case when sex = '1' the...

architect刘源源
17分钟前
0
0
Kubernetes探秘—kubelet的配置参数

kubelet是Kubernetes中的核心组件,需要在每一个节点安装,也是kubernetes集群启动的第一个服务。kubelet的参数存放在多个目录,修改时如果不完整就会导致各种错误,下面我们kubelet的参数存...

openthings
21分钟前
0
0
如何通过 MySQL 的二进制日志恢复数据库数据

经常有网站管理员因为各种原因和操作,导致网站数据误删,而且又没有做网站备份,结果不知所措,甚至给网站运营和盈利带来负面影响。所以本文我们将和大家一起分享学习下如何通过 MySQL 的二...

吴伟祥
29分钟前
1
0
org.apache.catalina.startup.Catalina stopServer SEVERE: Could not contact localhost:8005. Tomcat may

org.apache.catalina.startup.Catalina stopServer SEVERE: Could not contact localhost:8005. Tomcat may 2017年07月21日 14:52:10 子木HAPPY阳VIP 阅读数:14134 标签: tomcatnginx 更多......

linjin200
31分钟前
1
0
线下工坊|Blockchain Coding Day:零基础教你开发DAPP(北京)

我们的目标是通过编程学习让你更了解区块链技术。这将对区块链开发初学者一次很好的体验。这里需要强调一下,编程零基础也能学会。 我们将以小组的形式,由教练带领学员完成DAPP开发。每位学...

HiBlock
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部