调用jQuery滑出效果时闪烁的解决方法


Posted in Javascript onMarch 27, 2014

问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉。最终找到了一个高手写的东东,重写的jQuery的滑出

效果。高手的链接地址如下:
http://aqr199.myweb.hinet.net/jquery_slide_iebug.htm

代码如下:

var b1 = new slide_fix($('#Div3')); 
$('#Button5').click(function(){b1.close();});//收 
$('#Button6').click(function(){b1.open();});//? function slide_fix(b){ 
var h = b.height(); 
var step = 600; 
var time = 13; 
this.open = function(){ 
timeRate(step,function(c,r){ 
var h1 = h*r; 
b.height(h1); 
if(c==1){b.show();} 
}); 
} 
this.close = function(){ 
timeRate(step,function(c,r){ 
var h1 = h *(1-r); 
b.height(h1); 
if(r==1){b.hide();} 
}); 
} 
function timeRate(step,fn){ 
var t = now(); 
var count = 1; 
var timeId = setInterval(function(){ 
var t1 = now(); 
var rate = ((t1-t)>step) ? 1 : (t1-t)/step; 
fn(count,rate); 
if(rate==1){clearInterval(timeId);} 
count++; 
},time); 
} 
function now() { 
return (new Date).getTime(); 
} 
}
Javascript 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
javascript简单链式调用案例分析
May 10 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
Angular8 简单表单验证的实现示例
Jun 03 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 #Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
Mar 27 #Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 #Javascript
js弹出确认是否删除对话框
Mar 27 #Javascript
js或jquery实现页面打印可局部打印
Mar 27 #Javascript
window.location.href IE下跳转失效的解决方法
Mar 27 #Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
ES6 如何改变JS内置行为的代理与反射
2019/02/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python注释详解
2016/06/01 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
PyQt5实现画布小程序
2020/05/30 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
Python的logging模块基本用法
2020/12/24 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
道路运输企业安全生产责任书
2014/07/28 职场文书
国庆横幅标语
2014/10/08 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python