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

问题现象如题所示，在调用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();
}
}

赞 (0)

相关推荐

  • 完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题

    如果用slideToggle,鼠标快速滑过后,滑进滑出很多次,要解决这个问题,用stop(false,true) $(".Nav_L").hover(function () { $(".Cate2").stop(false,true).slideToggle(500); }); 以上这篇完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Jquery鼠标经过不停滑动的问题

    很多情况 Jquery 中 尤其在 鼠标经过的时候会不停的 显示隐藏 html元素. 导致来回隐藏.显示 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ //********问题点在这里,这里没有判断是否处于动画 $(".panel").slideToggle("slow

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

    问题现象如题所示,在调用jQuery 滑出效果时,层会现次闪烁一下.在网上找了许多解决文案,说要加如下标示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 可问题是现在的 标题头已 为 html4.0 ,如若改为上面的情况,则页面会乱掉.

  • jQuery实现仿腾讯微博滑出效果报告每日天气的方法

    本文实例讲述了jQuery实现仿腾讯微博滑出效果报告每日天气的方法.分享给大家供大家参考.具体分析如下: 这是仿腾讯微博滑出效果的每日天气代码,鼠标放上去,天气内容将从左向右滑出来,像开抽屉一样,本动画效果流畅,当然少不了jQuery的功劳,本代码使用了1.6.2版本的jQuery插件来实现这一功能. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

  • Winform自定义控件在界面拖动、滚动鼠标时闪烁的解决方法

    Winform自定义控件在界面拖动、滚动鼠标时闪烁的解决方法

    环境说明: 项目中有一个基类窗体BaseForm,有一个自定义控件TextBoxBase,两个控件都做了一些独特常规的封装和重写,在TextBoxBase中有一点重绘的下划线,发现在窗体运行之后,在窗体上滚动鼠标滚轮,会导致TextBoxBase下划线闪烁. 解决办法: 重写两个控件的CreateParams方法. BaseForm中添加: protected override CreateParams CreateParams { get { CreateParams cp = base.Cr

  • jquery鼠标悬停导航下划线滑出效果

    本文实例为大家分享了jquery鼠标悬停导航下划线滑出效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>jquery鼠标悬停导航下划线滑出效果</title> <style> *{ margin:0; padding:0; list-style:none;} img{ border:0;} .

  • jQuery实现的淡入淡出与滑入滑出效果示例

    jQuery实现的淡入淡出与滑入滑出效果示例

    本文实例讲述了jQuery实现的淡入淡出与滑入滑出效果.分享给大家供大家参考,具体如下: 1. 淡入淡出效果: 我们做这样一个实例: 有两个按钮,点击淡入,有一个div层淡入,点击淡出,div层淡出: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net jQuery淡入淡出</title> <style> .d

  • jQuery实现的卷帘门滑入滑出效果【案例】

    jQuery实现的卷帘门滑入滑出效果【案例】

    本文实例讲述了jQuery实现的卷帘门滑入滑出效果.分享给大家供大家参考,具体如下: 效果: 如果用JQ来做,其实非常简单,核心代码: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //jq入口函数简写方法 /* $(function ( ) { })*/ //jq入口函数普通方式 $(document).ready(function

  • jquery实现鼠标滑过小图时显示大图的方法

    本文实例讲述了jquery实现鼠标滑过小图时显示大图的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title></title> </head> <style type="text/css&

  • vue 路由切换过渡动效滑入滑出效果的实例代码

    vue 路由切换过渡动效滑入滑出效果的实例代码

    效果展示 css 滑入和滑出的动画 .twofade-enter {transform: translateX(100%);} .twofade-enter-active {transition: all 0.3s;position: absolute;height:100%;background:#ececec;} .twofade-leave-active {transition: all 0;transition-delay: 0.3s;position: absolute;} .twof

  • jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

    下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

  • jQuery找出网页上最高元素的方法

    本文实例讲述了jQuery找出网页上最高元素的方法.分享给大家供大家参考.具体如下: 这段JS代码通过jQuery遍历网页上的元素,找出其中最高的元素 $(document).ready(function() { var maxHeight = -1; $('.features').each(function() { maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); }); $('.features'

随机推荐