Javascript 我的动画有什么问题？_Javascript_Jquery_Animation

Javascript 我的动画有什么问题？

javascript jquery animation

Javascript 我的动画有什么问题？,javascript,jquery,animation,Javascript,Jquery,Animation,我试图在单击按钮以消失、出现并在页面上移动时设置图片动画。当我点击按钮时，我的图片一点也不动。我有一个新的功能为每一个动画我想发生，我有我的图片链接正确 $(document).ready(function(){ function disappear(){ $("#animation").hide(); }; $("#hide").on("click", disappear); function appear(){ $("#an

我试图在单击按钮以消失、出现并在页面上移动时设置图片动画。当我点击按钮时，我的图片一点也不动。我有一个新的功能为每一个动画我想发生，我有我的图片链接正确

$(document).ready(function(){
    function disappear(){
        $("#animation").hide();
    };

    $("#hide").on("click", disappear);

    function appear(){
        $("#animation").show();
    };

    $("#show").on("click", appear);

    function chosen(){
        $("#animation").toggle();
    };

    $("#toggle").on("click", chosen);

    function slidUp(){
        $("#animation").slideUp();
    };

    $("#slideUp").on("click", slidUp);

    function slidDown(){
        $("#animation").slideDown();
    };

    $("#slideDown").on("click", slidDown);

    function fadedAway(){
        $("#animation").fadeOut("slow");
    };

    $("#fadeOut").on("click", fadedAway);

    function fadedIn(){
        $("#animation").fadeIn("fast");
    };

    $("#fadeIn").on("click", fadedIn);
});

CSS

*{
    margin:0 0 6px;

}
header{
    text-align:center;
    color: black;
    padding:30px 150px;
}
body {

    font-weight: bold;
    text-align: center;
    background-repeat: repeat;
}

#Area{
    padding:200px;
    border-style: ridge;
    position: static;
    top: 400px;
    left: 300px;
}
#animation{
    position: absolute;
    top: 25%;
    left: 44%;
}

HTML

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Movers and Shakers</title>

    <link rel = "stylesheet" type= "text/css" href="example.css">

    <!-- include our jQuery library from google... -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript" src="example.js"></script>

    <script type="text/javascript" src="
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</head>
<body>
    <header>
      <h1>Movers and Shakers</h1> 
    </header>


    <div id = "Area">
    </div>

    <div id = "animation">
        <img src = "ship.jpg" alt = "ship">
    </div>

    <br>
    <br>
    <p></p>
    <br>
    <br>
    <fieldset>
    <legend> Animations: </legend>
        <button type = "button" id = "hide"> hide </button>
        <br>
        <button type = "button" id = "show">Show</button>
        <br>
        <button type = "button" id = "toggle">Toggle</button>
        <br>
        <button type = "button" id = "slideUp">Slide Up</button>
        <br>
        <button type = "button" id = "slideDown">Slide Down</button>
        <br>
        <button type = "button" id = "fadeOut">Fade Out</button>
        <br>
        <button type = "button" id = "fadeIn">fade In</button>

    </fieldset>
    <br>
</body>


搬运工
搬运工









动画：
隐藏


显示


切换


滑上


滑落


淡出


淡入

$（文档）.ready（函数（）{
函数disaper（）{
$（“#动画”）.hide（）；
};
$（“#隐藏”）。打开（“单击”，取消显示）；
函数出现（）{
$（“#动画”）.show（）；
};
$（“#显示”）。单击（“单击”，显示）；
函数选择（）{
$（“#动画”）.toggle（）；
};
$（“切换”）。打开（“单击”，选中）；
函数slideup（）{
$（“#动画”）.slideUp（）；
};
$（“#slideUp”）。在（“单击”，slideUp）上；
函数向下滑动（）{
$（“#动画”）.slideDown（）；
};
$（“向下滑动”）。在（“单击”，向下滑动）；
函数fadedAway（）{
$（“#动画”）。淡出（“慢”）；
};
美元（“#淡出”）。在（“点击”，淡出方式）；
函数fadedIn（）{
$（“动画”）.fadeIn（“快速”）；
};
$（#fadeIn”）。在（“单击”，fadeIn）；
});
*{
边际：0.06像素；
}
标题{
文本对齐：居中；
颜色：黑色；
填充：30px 150px；
}
身体{
字体大小：粗体；
文本对齐：居中；
背景重复：重复；
}
#区域{
填充：200px；
边缘样式：脊；
位置：静态；
顶部：400px；
左：300px；
}
#动画{
位置：绝对位置；
最高：25%；
左：44%；}

搬运工









动画：
隐藏


显示


切换


滑上


滑落


淡出


淡入


到底什么不起作用？我觉得很好