jQuery动画特效、显示与隐藏BUG(闪烁)解决方法

合集下载

Jquery常见问题解决

11. 如何追加或是添加html到元素中：
$('#lal').append('sometext');
12. 在创建元素时，如何使用对象字面量（literal）来定义属性
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
19. 如何检测各种浏览器：
检测Safari (if( $.browser.safari)),检测IE6及之后版本
(if ($.browser.msie && $.browser.version > 6 )),检测IE6及之前版本
(if ($.browser.msie && $.browser.version <= 6 )),检测FireFox 2及之后版本
// element- 一个DOM元素// index – 栈中的当前循环索引// meta – 有关选择器的元数据
// stack – 要循环的所有元素的栈// 如果包含了当前元素就返回true// 如果不包含当前元素就返回false
};// 定制选择器的用法：
$('.someClasses:test').doSomething();
23. 如何检查某个元素是否存在
if ($('#someDiv').length) {//万岁！！！它存在……}
24. 如何使用jQuery来检测右键和左键的鼠标单击两种情况：
$("#someelement").live('click', function(e) {

jQuery网页特效任务驱动式教程-实现动画效果

使用显隐动画模拟文件夹的树形列表结构
任务实现初始状态，使用jQuery代码将所有包含ul子元素的列表项li （ $("li").has("ul") ）鼠标指针设置为手状，列表符号图片为表示折叠状态的向右箭头，子元素ul都是隐藏的。对所有不包含ul子元素的列表项li，设置鼠标默认，列表符号为none。单击包含ul子元素的列表项li时，判断当前单击操作的是否是该元素自身（ if (this == event.target) ），这是因为在单击子元素触发click事件时，会同时触发父元素的click事件（事件的冒泡），所以此处必须要进行判断处理。若是，则根据其子元素的显示隐藏状态（is(":hidden")）更改其样式效果和子元素的隐藏显示效果；若单击的是子元素，则不做任何操作。
slideUp() 以逐渐改变高度的滑动方式隐藏显示的被选中元素。格式：$(selector).slideUp(speed, callback)
slideToggle() 可以在slideDown()与slideUp ()方法之间进行切换。格式：$(selector).slideToggle(speed, callback)
使用显隐动画模拟文件夹的树形列表结构
显隐动画
显示隐藏的元素 show(speed,easing,回调函数) speed：可选。设置动画变化过程持续的时间，取值可以是“slow|normal|fast|毫秒”，其中slow表示600毫秒，normal表示400毫秒，fast表示200毫秒，也可以自行定义动画持续的毫秒数。如果没有定义该参数，则元素会由隐藏状态直接变为显示状态，也就是没有完成修改的动画过程；如果定义了该参数，则元素的宽度、高度、透明度、外边距和内填充等样式属性，会在指定的时间内逐渐变化到完整显示 easing：可选。规定在动画的不同点上元素的速度。默认值为 “swing”，表示在开头和结尾移动慢，在中间移动快；"linear" 表示匀速移动。回调函数，表示在动画完成时要执行的函数，函数内部定义动画完成之后要执行的功能，该参数可以省略。

vuejs在解析时出现闪烁的原因及防止闪烁的方法

vuejs在解析时出现闪烁的原因及防⽌闪烁的⽅法原因：在使⽤vuejs、angularjs开发时，经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。

对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。

对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于Chrome这类快速的浏览器你会看见有闪烁的情况出现。

⽽对于IE7，8这类解析稍慢的浏览器⼤部分情况下是不会出现这个问题的。

解决⽅法：在vuejs、angularjs中为我们提供了v-cloak、ng-cloak来实现防⽌闪烁的⽅案，同时对于bing⽂字({{ express }} )我们也可以改为v-bind、ng-bind来实现避免。

下⾯以vuejs为例：#v-cloak⽤法：这个指令保持在元素上直到关联实例结束编译。

和 CSS 规则如 [v-cloak] { display: none } ⼀起⽤时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

⽰例：[v-cloak] {display: none;}<div v-cloak>{{ message }}</div><div> 不会显⽰，直到编译结束。

原理：带有v-clock的的元素设置为display:none，隐藏掉，在等到vue解析到带有v-clock的节点时候，会把attribute和class同时remove掉，这样就可以实现防⽌节点的闪烁。

实例：//example1:<span>{{price}}</span>//example2:<span v-bind="price"></span>//example3:<span v-cloak>{{price}}</span>上例⼦2和例⼦3实现的效果是⼀样的，⽽例⼦1在vuejs解析{{price}}之前，⽤户是可以看到"{{price}}"这个字符串的。

jquery动态添加元素无法触发绑定事件的解决方案。

jquery动态添加元素⽆法触发绑定事件的解决⽅案。

jquery动态添加元素⽆法触发绑定的事件的解决⽅案。

╭(●｀∀´●)╯⼆狗最近在⼯作中遇到⼀个问题，即当⽤jquery动态添加元素后，发现给动态添加的元素却⽆法触发事件（╯#-_-)╯╧═╧ ( ╯#-_-)╯┴—┴。

后来在⽹上查阅了⼀些资料，发现原来要这样处理乛◡乛：先上我出错的代码:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><link rel="stylesheet" href="/bootstrap/3.3.0/css/bootstrap.min.css"><script src="///jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){ //这⾥是动态添加元素$(".add").click(function(){var btn = $("<button class='newBtn btn btn-default'>新按钮</button>");$("body").append(btn);}) //这⾥是为添加的元素添加事件$(".newBtn").click(function(){alert("这⾥是新添加的元素触发的事件");})})</script></head><body><button class=" add btn btn-default">添加按钮</button></body></html>奉上我的解决⽅法，⼤神们勿喷哦:. ヽ(｡◕‿◕｡) .:｡+⽅法⼀：绑定live事件(live事件只在jquery1.9以下才⽀持，⾼版本不⽀持)。

jQuery网页特效任务驱动式教程-图像处理特效

购物网站中的放大镜
页面元素样式 shopping_left中下面的元素min用于存放缩略图下面的小图，样式要求：要设计为网格容器，分为5个列，最左侧和最右侧两个列的宽度都是30像素，中间3个列的宽度都是60像素，列与列之间的间距是15像素，共占据300像素。 min中所有图片的样式要求：宽度100%（是指与 min中网格对应的列宽一致），白色1像素实线边框，鼠标指向时显示为手状。使用.min>img:nth-child(2)定义图片 lianyiqunMin1.jpg初始时为红色边框，表示初始时被选中显示的是这幅图。 shopping_right的背景设置为#ddf颜色，只是为显示商品信息预留空间。
购物网站中的放大镜
页面元素样式 shopping_left中上面的元素zoom的样式要求：宽度300像素，高度300像素，边框为1 像素实线颜色#aaf，因为zoom内部有多个元素需要使用绝对定位，所以zoom需要设置为相对定位。 zoom内部的origin用于设置原始缩略图， scale用于显示放大之后的效果图。 origin的样式要求：宽度300像素，高度300 像素，相对定位。 origin中img元素的样式要求：宽度和高度与origin相同。
JavaScript高级编程
任务7 图像处理特效
任务7 图像处理特效
任务7.1 购物网站中的放大镜任务7.2 瀑布流图像布局任务7.3 添加文件类型图标任务7.4 超链接背景图的切换任务7.5 使用图片精灵实现星级评价
购物网站中的放大镜
任务描述左侧下方有3幅不同角度的商品小图，小图左侧和右侧的向左向右箭头在本页面中没有定义功能，如果提供的图片更多，这两个箭头可以用于向左或者向右滚动小图；上方是一幅缩略图，缩略图区域显示的图片根据用户选择的小图来确定，初始显示的是第1幅小图对应的缩略图，此时第1幅小图带着红色边框。下面是选择第二幅小图并选择放大区域之后的效果

jQueryhtml（）方法使用不了无法显示内容的问题

jQueryhtml（）⽅法使⽤不了⽆法显⽰内容的问题$("#content").html(data.content);$("#content")[0].innerHTML = data.content;今天遇到jquery中的html⽅法使⽤不了，只能⽤完最基本的innerHTML把内容展⽰出来。

具体原因还没找到，肯定跟内容有关，展⽰不了的html放上来供以后检查原因，是我收到csdn的⼀封邮件。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>智能硬件周刊 - 第4期</title><style type="text/css">a:link {color: #333;text-decoration: none;}a:hover {color: #c00;}span.hot {font-weight: bold;}.button * {vertical-align: middle;}</style></head><body><div><table align="center" border="0" cellpadding="0" cellspacing="0" width="760"><tbody><tr><td width="540"><a href="/m/news/newsletter/index/13" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img style="cursor: pointer;border: 0px;" alt="" src="/article/201406/1 <td width="30"></td><td width="190" style="font-size: 12px; font-family: Microsoft Yahei; line-height: 40px; padding-right: 3px" align="right">2014-07-29 第<span style="color: #c00; text-decoration: none;">4</span>期</td></tr><tr><td colspan="3" bgcolor="#cc0000" height="5"></td></tr><tr><td width="540" valign="top"><h1 style="font-family: Microsoft Yahei; font-size: 20px; margin: 20px 0 0 0; font-weight: normal; border-bottom: solid 1px #d1d1d1; color: #c00; padding-bottom: 5px"><img style="margin-right: 5px" alt="" src="/uploads/allimg/120413/118_ </h1><dl style="padding: 6 0 0 0;margin:0px;clear: both;"><img src="/uploadfile/logoimg/image/20140729/20140729111725_67948_logo.jpg" border="0" style="float:left;padding: 15px 10px 15px 0;width: 160px;height: 110px;"><dt style="color: #333; font-size: 16px; font-family: Microsoft Yahei; margin: 10px 0 3px 0; line-height: 26px;"><a style="text-align: left; color: #333; font-size: 16px; font-weight: bold; text-decoration: none" href="/article/2014-07-28/2820881" rel="external nofollow" rel="external nofollow" target="_blank"><span class="hot">智能硬件⽣态未成，打造平台为时尚早？</span></a></dt><dd style="color: #666666; font-size: 13px; font-family: 宋体; line-height: 22px; margin: 0px;">当前的智能硬件产业发展是由创业公司探路，巨头纷纷跟进打造开放平台。

窗口闪烁解决方案

Win32 解决窗口闪烁(2011-09-06 10:41:40)转载▼标签：杂谈转自:/ultraman_king/blog/item/d71d004a4f2a8a3909f7ef 8d.html〇、前提本文采用Win32 SDK 以及C/C++ 语言描述，其中没有用到C++ 语言的功能。

采用标准Win32 应用程序模型，即从WinMain() 进入，然后使用RegisterClassEx() 注册主窗口类，同时主窗口的消息处理回调过程是WndProc()，其它的一些变量和函数在文章中描述。

一、闪烁的分类与原因通常的闪烁分为：1. 窗口内容的闪烁，例如使用 TextOut() 直接在窗口客户端绘制文字等；2. 窗口子控件闪烁，例如窗口中的 Button、TabControl 闪烁等。

所有闪烁的根本原因只有一个，就是同一个像素使用不同的颜色值多次绘制，造成视觉上的闪烁现象。

而应用在上面两种闪烁的情况中，造成 Windows 为同一个像素绘制多次的成因就分为很多种了：1. 窗口首先在 WM_ERASEBKGND 消息中使用背景画刷（如果在类样式中指定的话）擦除背景，然后再在 WM_PAINT 中绘制内容（如之前说到的TextOut），造成了在内容处的同一个像素绘制两次，从而造成了 TextOut 输出的内容会不断闪烁；（这个现象在窗口每次需要WM_PAINT 时就会出现）；2. 窗口在 WM_PAINT 绘制完内容之后向所有的子窗口发送 WM_PAINT 消息，从而造成所有子窗口位置的像素首先被窗口的 WM_PAINT 绘制一次，其次被这个子窗口的内容绘制一次（或多次），造成闪烁现象；3. 子窗口本身也需要处理 WM_ERASEBKGND 和 WM_PAINT 消息，Windows 有些系统控件本身没有经过良好的优化，造成闪烁，例如 TabControl。

下面就消除这几种闪烁情况进行说明。

二、合适的类样式和窗体样式最简单的消除闪烁的方法就是首先需要指定合适的类样式（CS_*）和窗体样式（WS_* 以及WS_EX_*），选用相应的样式时可以考虑一下几点：1. 所有具有子窗口的父窗口都需要加入 WS_CLIPCHILDREN 样式；2. 所有子窗口都需要加入 WS_CLIPSIBLINGS 样式；3. 谨慎考虑 CS_HREDRAW 和 CS_VREDRAW，需要根据窗口客户区绘制的内容来决定；有关这些样式的具体解释参见 MSDN 或其它相关参考资料。

jQuery无法获取隐藏元素（display：none）宽度（width）和高度（heig。。。

jQuery⽆法获取隐藏元素（display：none）宽度（width）和⾼度（heig。

⽤jQuery写⼀个通过点击左右图标来翻阅图⽚的⼩插件，写好后测试可以正常运⾏，但是放到Tab中后发现只有第⼀个Tab中的代码能够正常运⾏，其它全部罢⼯了。

⽤Chrome⾃带的开发⼯具⼀查，发现罢⼯的Tab中。

⼩插件⼀些重要元素的宽度都变成“0”了，因为这个⼩插件需要计算动态宽度来实现，于是马上想到是⼩插件中的宽度获取失败了，果不其然。

汗，居然⼀直没发现jQuery⽆法获取隐藏元素（display:none）的宽度(width)和⾼度(height)，为了兼容IE6，我⽤1.x版，⽽且是官⽅最新的1.10.2版，不知道在2.x版中这个问题有没有解决。

既然jQuery都不⽀持，那么Javascript也就肯定不⽀持了，⽹上搜索了⼀下，有个解决⽅案是⽤visibility:hidden来代替display:none，由于visibility:hidden占⽤物理空间，因此可以获取宽⾼。

问题是这需要我去改动已经写好的Tab插件，这种拆东墙补西墙的事情，总会让⼈感觉不爽的。

长时间搜索其它解决⽅案⽆果，就在我快要妥协的时候，突然眼前⼀亮，发现了个好东西：jQuery Actual 可以说它⼏乎完美的解决了这个问题，⽽且使⽤⽅法极其简单，使⽤$('#someElement').actual('width')的⽅式来代替$('#someElement').width()就可以了，兼容性也⼗分出⾊，可以兼容IE6浏览器，压缩后体积只有1.1K也是⼀⼤亮点，更⽜的是还⽀官⽅信息jQuery ActualjQuery ActualjQuery ActualjQuery ActualjQuery版本要求jQuery 1.2.3+所兼容的浏览器Firefox 2.0+Internet Explorer 6+Safari 3+Opera 10.6+Chrome 8+安装⽅法HTML⽂档需要声明DOCTYPE引⽤JS⽂件即可<script type="text/javascript" src="path/jquery.min.js"></script><script type="text/javascript" src="path/jquery.actual.js"></script>使⽤⽅法代码范例//get hidden element actual width$('.hidden').actual('width');//get hidden element actual innerWidth$('.hidden').actual('innerWidth');//get hidden element actual outerWidth$('.hidden').actual('outerWidth');//get hidden element actual outerWidth and set the `includeMargin` argument$('.hidden').actual('outerWidth',{includeMargin:true});//get hidden element actual height$('.hidden').actual('height');//get hidden element actual innerHeight$('.hidden').actual('innerHeight');//get hidden element actual outerHeight$('.hidden').actual('outerHeight');// get hidden element actual outerHeight and set the `includeMargin` argument$('.hidden').actual('outerHeight',{includeMargin:true});//if the page jumps or blinks, pass a attribute '{ absolute : true }'//be very careful, you might get a wrong result depends on how you makrup your html and css$('.hidden').actual('height',{absolute:true});// if you use css3pie with a float element// for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'// please see demo/css3pie in action$('.hidden').actual('width',{clone:true}); 个⼈觉得jQuery官⽅应该考虑将这个功能写进内核，那就更⽅便了。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

留下那种植物特有的清新的味道，那是向着阳光的生命力，不是吗
上面四个采用绑定时间到同一元素；下面四个则绑定到两个元素；接下来看 JS 代码，分别和下面的对应。很明显的看到 $(&39;6&39;) 、
$(&39;7&39;)、$(&39;8&39;)将事件分开了进行绑定，mouseover 绑定到本身，mouseout 则绑定到了子元素。运行之后，可以发现第 6、7、8 个 div 当鼠标经过然后移动到提示框上面没有出现闪烁的
留下那种植物特有的清新的味道，那是向着阳光的生命力，不是吗
就不在赘述。大家可到我提供的地址下载示例。因为事件绑定到了同一元素上才会致使闪烁的情况出现，所以只要我们将事件绑定在不同的元素上即可解决。但要注意的是，绑定到不同的元素上应确保元素是块级元素或具有块级元
素的属性。先看 HTML 代码，我做了 8 个 div 分成两行进行效果对比。在 div 里面每个都包含一个隐藏的样式为 hide 的 div（即我说的提示框），并分别给了 ID。
jQuery 是一款强大的 JS 库，提供了许多动态效果，使用时还不用考虑兼容性。但是如果你足够细心你就会发现这样一种情况：编写代码时，需要对某一元素，当鼠标移上去就显示弹出信息，移开隐藏信息，你可能会用 mouseover 和
mouseout 结合 hide()、show()函数，这种方法
JS 文件电脑 ery 之所以会产生上面所提到的闪烁问题，其根本原因就在于事件被绑定到了同一个元
素上面，这样鼠标在经过的时候鼠标焦点在不断
的变化，浏览器无法准确具体的判断鼠标所处的
位置，从而导致了闪烁问题。解决办法下面两张是我做的示例，前面的是 JS 效果代码，后面的是 HTML 代码。需要说明的是一共用到了四种显示隐藏 show/hide 函数（传参和不传参）， fadeIn/fadeOut（传参和不传参），fadeTo 同理
情况是向着阳光的生命力，不是吗
说明：我做的是简单地展示。可以发下在此情况下 678 三个 div 鼠标只有从提示框中移开提示框才会消失。这就是分别绑定事件不足的一个地方。如果你想要实现当鼠标一出第 678 个 div 提示框也会隐藏的效果，你可以在 div 里面在嵌套
没有问题。但如果你想要更好的效果比如控制显
示隐藏过程的时间，此时如在函数传入时间参数，你就会发现，当你在添加了事件的元素上移动鼠标时，提示框会一直闪烁，若隐若现。今天，介绍一种解决办法。曾经为解决这个 BUG 找遍互联网站，未果，无人提及。
留下那种植物特有的清新的味道，那是向着阳光的生命力，不是吗
一个 div，然后将 mouseout 事件绑定到新嵌套的 div 上面即可解决。注意事项本经验属个人发现，个人原创，仅为学习之用，谢绝任何形式的转载与传播。
1cv0f2c9a 易博