个人中心
gpt4 book ai didi

javascript - Jquery-ui 和动画错误

转载 作者：行者123 更新时间：2023-11-28 10:14:59 24 4
gpt4 key购买 nike

目前，当我同时运行多个 jquery-ui 和 animate 函数时，我遇到了一些问题，我不确定我是否使用错误或什么，但我只是无法让 stop() 正常工作.

例如，当鼠标悬停在 div 上时，它会产生动画效果，然后鼠标移开时，它会产生其他动画效果，但是当鼠标悬停并快速移出时，就会出现问题..任何人都可以帮我解决这个问题吗？

这是完整的 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);
    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>

谢谢!=)

最佳答案

您能否举一个更简单的示例，或者准确描述应该发生什么以及正在发生什么，我会修复。我已经看到，当垃圾邮件事件发生时，某些变量没有正确重置，但在我看到缩短的代码之前，很难弄清楚您真正想要发生的事情。

谢谢

关于javascript - Jquery-ui 和动画错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6787755/

24 4 0
文章推荐： Swift 3 - 以编程方式创建标题栏约束
文章推荐： javascript - jquery ui 自动完成 id 和关闭事件 ui 参数
文章推荐： ios - 类单例初始化不能自动完成
文章推荐： javascript - Jquery关于属性操作的问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com