文档章节

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

之渊
 之渊
发布于 2016/11/26 17:24
字数 311
阅读 30
收藏 0
点赞 0
评论 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
博文 492
码字总数 144126
作品 0
佛山
程序员
【Animations】使用动画显示或隐藏视图(4)

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

lichong951 ⋅ 05/28 ⋅ 0

jQuery动态效果学习笔记

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

inw3cschool ⋅ 2017/04/25 ⋅ 0

jquery的知识必记点---实现动画效果

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

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

jQuery基础效果

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

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

jQuery

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

仇诺伊 ⋅ 2017/11/19 ⋅ 0

jQuery学习笔记--效果,操作html元素,遍历DOM树

参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以...

codingcoge ⋅ 05/19 ⋅ 0

jQuery 简单归纳总结

jQuery语法是为HTML元素的选取编制的,能够对元素运行某些操作。 基础语法是:$(selector).action() +美元符号定义 jQuery +选择符(selector)“查询”和“查找” HTML 元素 +jQuery 的 ac...

技术mix呢 ⋅ 2017/11/16 ⋅ 0

05-老马jQuery教程-动画

前言 jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实现很多很绚的效果,而且简单易用...

aicoder ⋅ 2017/12/05 ⋅ 0

JQuery 淡出、 动画、显示/隐藏切换等效果

1、jQuery slideToggle() 表示简单的 slide panel 效果。 2、jQuery fadeTo()表示简单的淡出效果。 3、jQuery animate() 动画效果 4、显示/隐藏切换效果 $("p").toggle(); 5、jQuery 效果 函...

zting科技 ⋅ 2017/10/23 ⋅ 0

Java程序员从笨鸟到菜鸟之(九十一)跟我学jquery(七)jquery动画大体验

本文来自:曹胜欢博客专栏。转载请注明出处:http://blog.csdn.net/csh624366188 最近一直感觉自己好忙,每天都浑浑噩噩的过着,转眼间,好像有好长时间没有更新笨鸟到菜鸟了。现在想想,实在...

长平狐 ⋅ 2012/11/12 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 43分钟前 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 50分钟前 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部