2017-09-09 9 views
-3

<script></script>タグに問題があります。 私は、左上から右下に移動したいオブジェクトを持っています。 私はそれを動かすためにCSSアニメーションを使用しています。アニメーションが終了したら、そのオブジェクトを非表示にします。ここでCSSアニメーション - JS x.addEventListener( "webkitAnimationEnd" ...)が機能しない

はHTMLです:

<!DOCTYPE html> 

    <html> 
    <head> 
     <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
     <meta charset="utf-8"> 
     <meta description="Descriptionhere"> 
     <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <script> 
function endfunct() { 
$('#object').css('display', 'none'); 
}; 
var hiding = document.getElementById('object'); 
hiding.addEventListener("webkitAnimationEnd", endfunct());</script> 
    </head> 

    <body>The object is here: its id is "#object"</body> 
</html> 

とCSS:

/* Animation */ 
#object { 
    /*padding-left: 200px;*/ 
    padding-top: 0; 
    animation-duration: 6s; 
    animation-name: slidein; 
    animation-iteration-count: 1; 
    animation-timing-function: linear; 
} 
@keyframes slidein { 
    from { 
    margin-left: -100%; 
    width: auto; 
    } 

    to { 
    margin-left: 300%; 
    width: auto; 
    padding-top: 500px; 
    } 
} 
/* END Animation */ 

私はJSとほぼ新たなんだ、これが動作しない理由を私は得ることはありません。 また、これを行う元の方法は別のJSシートで行われましたが、何が起こったのかは、シートの中に何を入れても何もしませんでした。リンクが悪いためだと思います。リンクは次のとおりです:

<script src="javascript/animation.js"></script> 

編集済みです。 ありがとうございます。

答えて

0

 var objecthide = document.getElementById('object'); 
     $('objecthide').css('display', 'none'); 

はあなたが呼ばれるこの $('')ない変数内のセレクタを配置する必要があり、まだあなたのコードを実行しようとしましたが、ちょうどこの部分かかわら気づいていない、 あなたがこれを行うことができます。 objecthide.css('display', 'none')

または単にあなただけの代わりにこれを行うことができます:

 $('#object').css('display', 'none'); 

まあこれはあなたの問題を解決する可能性があります。

+0

私はオブジェクトがIDではないことに気がついたので、オブジェクトをオブジェクトの#objectからcssに、クラスのオブジェクトをオブジェクトのIDに変更しました。これは私がスクリプトタグで今持っているものです: ' 'しかしどちらもうまくいきません。 –

関連する問題