Javascript 动画失败_Javascript_Jquery_Html

Javascript 动画失败

javascript jquery html

Javascript 动画失败,javascript,jquery,html,Javascript,Jquery,Html,我这里有一个脚本，它对包含来自数据库的产品的3个div进行动画制作。第一次加载页面时，它的动画效果很好，但我的问题是它在一分钟后以及每次我刷新页面时动画效果都不好 <html> <script src='jquery.js'></script> <script> $(document).ready(function(){ $("#Slide2").hide(); $("#Slide3").hide(); }); var h

我这里有一个脚本，它对包含来自数据库的产品的3个div进行动画制作。第一次加载页面时，它的动画效果很好，但我的问题是它在一分钟后以及每次我刷新页面时动画效果都不好

<html>
<script src='jquery.js'></script>
<script> 
    $(document).ready(function(){
    $("#Slide2").hide();
    $("#Slide3").hide();
});
var h = 1;
var x = setTimeout(show2, 3000);

function show1()
{
    h = 1;
    $("#Slide1").show();
    $("#Slide2").hide();
    $("#Slide3").hide();
    $("#Slide1").css("left", "-400px");
    $("#Slide1").animate({left:'-1px'});
    clearTimeout(x);
    x = setTimeout(show2, 3000);
}
function show2()
{
    if(h <= 2)
    {
        h = 2;
        $("#Slide2").show();
        $("#Slide1").hide();
        $("#Slide3").hide();
        $("#Slide2").css("right", "-400px");
        $("#Slide2").animate({right:'-1px'});
        clearTimeout(x);
        x = setTimeout(show3, 3000);
    }
    else
    {
        h = 2;
        $("#Slide2").show();
        $("#Slide1").hide();
        $("#Slide3").hide();
        $("#Slide2").css("left", "-400px");
        $("#Slide2").animate({left:'-1px'});
        clearTimeout(x);
        x = setTimeout(show3, 3000);
    }
}
function show3()
{

    h = 3;
    $("#Slide3").show();
    $("#Slide2").hide();
    $("#Slide1").hide();
    $("#Slide3").css("right", "-400px");
    $("#Slide3").animate({right:'-1px'});
    clearTimeout(x);
    x = setTimeout(show1, 3000);
}

</script>
<style>
    #Slide1 , #Slide2, #Slide3
    {
        width:530px;
        height:100px;
        position:relative;
        background:blue;
    }
    #container
    {
        width:500px;
        margin:auto;
        border:1pt solid black;
        overflow:hidden;
        height:auto;
    }
</style>
    <body>
        <div id='container'>
            <button onclick="check1()">1</button>
            <button onclick="check2()">2</button>
            <button onclick="check3()">3</button>
            <br></br>
            <div style='width:530px;margin:auto'>
            <div id='Slide1'>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:#ff0'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:#ff0'></div>
            </div>
            <div id='Slide2' >
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:green'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:green'></div>
            </div>
            <div id='Slide3' >
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;background:red'></div>
                <div style='width:120px;height:100px;float:left;margin-left:10px;margin-right:10px;background:red'></div>
            </div>
            </div>
        </div>
    </body>
</html>


$（文档）.ready（函数（）{
$（“#Slide2”）.hide（）；
$（“#Slide3”）.hide（）；
});
var h=1；
var x=设置超时（显示23000）；
函数show1（）
{
h=1；
$（“#Slide1”）.show（）；
$（“#Slide2”）.hide（）；
$（“#Slide3”）.hide（）；
$（“#Slide1”）.css（“左”，“-400px”）；
$（“#Slide1”）.animate（{left:'-1px'}）；
清除超时（x）；
x=设置超时（显示23000）；
}
函数show2（）
{
如果（h在开始新的setInterval之前没有清除上一个setInterval。请在show1（）、show2（）和show3（）中的每个setInterval之前使用clearInterval（x）。希望能有所帮助
show2（）中有多余的if-else循环。请在此处检查(http://jsfiddle.net/cJ9FK/)
希望这会有所帮助，谢谢你，但是你有很多重复的代码你不需要，那些check
和show
函数可以减少到每个函数只有一个，在这里你传递所需的参数是我还是你不应该使用setTimeout（…）
而不是setInterval（…）
？setTimeout（…）
将重新运行函数，如果您使用setTimeout（…）
将只运行一次，并且您不需要使用clearInterval（…）
。另外，让代码$（文档）准备就绪（函数（））也是错误的{
在你的函数中，它说函数的那部分应该只在页面加载事件之后运行，请删除它！感谢大家，它工作了，我使用了setTimeout，但当我尝试使用按钮（1,2,3）时仍然有问题动画出错了，速度变快了，当你在幻灯片1中时，幻灯片2不会动画，它只会显示。@Mortb感谢你回答我的问题。实际上，我添加了clearinterval（x），但它只是循环函数show2（），我实际上使用setTimeOut解决了它，但我的按钮（1,2,3）仍然有问题当我点击其中任何一个按钮时，动画会出错button1=check1（）谢谢各位。我还有一个问题，因为我的按钮（1,2,3）有一个onclick=“show1（）”，但如果我使用它，动画会出错。show2（）只显示div，不再为其设置动画