Jquery-ui and animate bugs
currently I'm facing some problems with jquery-ui and animate functions when running multiple of them together, I'm not sure whether I used it wrongly or what, but I just can't get the stop() working correctly.
For example when mouseover on a div, it will animate something, then mouseout it will animate something else, but when mouseover and out rapidly then it will have problem.. can anyone help me out on this?
and here is the full html+js:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jtest</title>
<link rel="Shortcut Icon" href="favicon.ico" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
function showbox2() {
$('#box2').show().animate({
opacity: 1,
top: '+=1025'
}, 1200, 'easeOutExpo');
}
function runbox2() {
$(".box2_img").show("fade", 800);
$('.box2').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 3500
});
}
function xbox2() {
$(".box2x").stop().show("blind", { direction: "horizontal" }, 500);
$(".box3").stop().hide("blind", { direction: "horizontal" }, 800);
}
function hbox2() {
$(".box2x").stop().hide("blind", { direction: "horizontal" }, 500);
$(".box3").stop().show("blind", { direction: "horizontal" }, 800);
}
function showbox3() {
$('#box3').show().animate({
opacity: 1,
right: '-=1000'
}, 1200, 'easeOutExpo');
}
function runbox3() {
$(".box3_img").show("fade", 800);
$('.box3').cycle({
fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 4500
});
}
function xbox3() {
$(".box3x").stop().show("blind", { direction: "horizontal" }, 500);
$(".box2").stop().hide("fade", 800);
}
function hbox3() {
$(".box3x").stop().hide("blind", { direction: "horizontal" }, 500);
$(".box2").stop().show("fade", 800);
}
function showbox9() {
$('#box9').show().animate({
opacity: 1,
right: '+=1241'
}, 1200, 'easeOutExpo');
}
function runbox9() {
$(".box9_img").show("fade", 800);
$('.box9').cycle({
fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 4800
});
}
function showbox10() {
$('#box10').show().animate({
opacity: 1,
right: '-=1000'
}, 1200, 'easeOutExpo');
}
function runbox10() {
$(".box10_img").show("fade", 800);
$('.box10').cycle({
fx: 'turnUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 3800
});
}
function showbox11() {
$('#box11').show().animate({
opacity: 1,
bottom: '-=1000'
}, 1200, 'easeOutExpo');
}
function runbox11() {
$(".box11_img").show("fade", 800);
$('.box11').cycle({
fx: 'zoom', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
timeout: 7700
});
}
function xbox11() {
$(".box11x").stop().show("blind", { direction: "vertical" }, 500);
$(".box9").stop().hide("explode", { direction: "vertical" }, 1000);
$(".box10").stop().hide("explode", { direction: "vertical" }, 1000);
}
function hbox11() {
$(".box11x").stop().hide("explode", { direction: "vertical" }, 1000);
$(".box9").stop().show("blind", { direction: "vertical" }, 500);
$(".box10").stop().show("blind", { direction: "vertical" }, 500);
}
function showit() {
document.getElementById('loading_msg').style.display=('none');
setTimeout("showbox2()",500);
setTimeout("showbox3()",800);
setTimeout("showbox9()",1300);
setTimeout("showbox10()",1500);
setTim开发者_开发知识库eout("showbox11()",1800);
setTimeout("runbox2()",1200);
setTimeout("runbox3()",1800);
setTimeout("runbox9()",2500);
setTimeout("runbox10()",2800);
setTimeout("runbox11()",2800);
}
</script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="showit();">
<div id="outer-container">
<div id="loading_msg">Loading, please wait ...</div>
<div id="container">
<div id="box2" class="box2" onmouseover="xbox2();">
<div class="box2_img" style="background-color:#F00; width:199px; height:233px;"></div>
<div class="box2_img" style="background-color:#0F0; width:199px; height:233px;"></div>
</div>
<div id="box2x" class="box2x" onmouseout="hbox2();">
<div class="box2_imgx" style="display:block; background-color:#FFF;"></div>
</div>
<div id="box3" class="box3" onmouseover="xbox3();">
<div class="box3_img" style="background-color:#F00; width:196px; height:233px;"></div>
<div class="box3_img" style="background-color:#0F0; width:196px; height:233px;"></div>
</div>
<div id="box3x" class="box3x" onmouseout="hbox3();">
<div class="box3_imgx" style="display:block; background-color:#FFF;"></div>
</div>
<div id="box9" class="box9">
<div class="box9_img" style="background-color:#F00; width:199px; height:118px;"></div>
<div class="box9_img" style="background-color:#0F0; width:199px; height:118px;"></div>
</div>
<div id="box10" class="box10">
<div class="box10_img" style="background-color:#F00; width:196px; height:118px;"></div>
<div class="box10_img" style="background-color:#0F0; width:196px; height:118px;"></div>
</div>
<div id="box11" class="box11" onmouseover="xbox11();">
<div class="box11_img" style="background-color:#fff; width:405px; height:203px;"></div>
</div>
<div id="box11x" class="box11x" onmouseout="hbox11();">
<div class="box11_imgx" style="display:block; background-color:#FFF;"></div>
</div>
</div>
</div>
</body>
</html>
Thanks! =)
can you make a simpler example or describe exactly what should happen and what is happening please and I'll fix. I have seen it where, when spamming events, certain variables are not reset properly but until I cn see the shortened code its kind of difficult working out what you actually want to happen.
Thanks
加载中,请稍侯......
精彩评论