Question

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

$(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>

Answer 1

＆＃13;

$(document).ready(function(){
    function disapear(){
        $("#animation").hide();
    };
    $("#hide").on("click", disapear);

    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);
});

＆＃13;

*{
    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%;}

＆＃13;

   
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>




    <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>

＆＃13;

无法使你的jquery链接正常工作，但有解决方案：

我使用谷歌jquery链接

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>




And you where missing this :
});

由于显而易见的原因，图片并未显示，但我已修复您的问题。你最好的朋友是F12我的朋友。当你的javascript出现问题时它会告诉你：）

我的动画有什么问题？

1 个答案: