私のアニメーションで何が問題になっていますか？

-1

ボタンをクリックして表示され、ページ上を移動したり移動したりするときに、画像をアニメートしようとしています。私がボタンをクリックすると、私の絵は全く動かない。私は起こるすべてのアニメーションのための新しい機能を持っているし、正しくリンクされた自分の写真があります。私のアニメーションで何が問題になっていますか？

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

出典

2016-06-17 jjdouble000

* *正確に*動作しないのですか？私にはうまく見えるhttp://codepen.io/pjabbott/pen/pbEomN –

$(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); 
 
});

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


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

が動作するようにあなたのjqueryのリンクを取得できませんでしたが、解決策があります：

私はGoogleの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で問題が発生したときに通知します:)

出典

2016-06-17 18:06:23 Alexandre

私のアニメーションで何が問題になっていますか？

答えて

関連する問題