Home > Web Front-end > JS Tutorial > body text

Solution to flickering when calling jQuery slide-out effect_javascript skills

WBOY
Release: 2016-05-16 16:54:03
Original
1299 people have browsed it

The problem is as shown in the title. When calling the jQuery slide-out effect, the layer will flash once. I found many solutions on the Internet, saying that the following mark should be added:

Copy the code The code is as follows:



But the problem is that the title header is now html4.0. If it is changed to the above situation, the page It will be messy. Finally, I found something written by an expert, rewriting the jQuery slide-out

effect. The link address of the master is as follows:
http://aqr199.myweb.hinet.net/jquery_slide_iebug.htm

The code is as follows:
Copy the code The code is as follows:

var b1 = new slide_fix($('#Div3'));
$('#Button5').click(function (){b1.close();});//Close
$('#Button6').click(function(){b1.open();});//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();
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!