1
現在、私はjquery-uiとアニメーション機能の問題に直面しています。それらの複数を一緒に実行すると、間違って使用したのかどうか分かりませんが、 stop（）が正常に動作しています。Jquery-uiとアニメーションのバグ
たとえば、divでmouseoverを実行すると、何かをアニメーション化してからmouseoutを実行すると、何か他のものがアニメーション化されますが、マウスオーバーしてすぐに問題が発生します。
<!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);
setTimeout("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>
ありがとう：
、ここでは完全なHTML + jsのです！ =）
.mouseenter（）.mouseleave（）http://api.jquery.com/mouseleave/ –
のおかげで、私には新しいが、しかし、私はまだそれが仕事を得ることができない便利な機能、（ （」。BOX11" 。）のMouseEnter（関数（）：まだ）今試し – jihchuan
OK、その作業は今でも問題はまだありますが、マウスが早すぎる/離れるとページがクラッシュする~~ – jihchuan