文档章节

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

之渊
 之渊
发布于 2016/11/26 17:24
字数 311
阅读 33
收藏 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
博文 514
码字总数 151976
作品 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基础效果 $(document).ready(function(){}这句话的意思是页面加载完成后执行, 等同于js中的window.onload,大家学了jQuery的话应该就会知道 $(document).ready(function(){//这行代码...

新网学会
2017/12/11
0
0
jQuery

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

仇诺伊
2017/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

day92-20180918-英语流利阅读-待学习

健身最大的敌人不是懒惰,而是逞强 Daniel 2018-09-19 1.今日导读 还记得 2008 年北京奥运会运动员刘翔的退赛风波吗?那天几乎所有中国人都将视线聚焦在了鸟巢体育馆 110 米栏的项目上,迫不...

飞鱼说编程
24分钟前
2
0
70.shell的函数 数组 告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析 20.16/20.17 shell中的函数: ~1. 函数就是把一段代码整理到了一个小单元中,并给这个小单元起一个名字,当用到这段...

王鑫linux
今天
3
0
分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
今天
6
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
今天
4
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
今天
56
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部