アニメーションで要素を動かしたい

アニメーションを使ってクリックしたら2秒かけて右に500ｐｘ、下に300ｐｘ動かしたいです。
ネットや本で調べて色々試しましたが動かないです。ご指摘いただきたいです。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>アニメーション</title> <link rel="stylesheet" type="text/css" href="base.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ // ここに処理を記述

$("#button").click(function(){
  $("#button").animate({right:'500px'},2000)
  $("#button").animate({bottom:'300px'})

});
});
</script>

</head> <body> <div id="button"> <p>button</p> </div> </body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

.animate()にrightやbottomを指定する場合はその要素にpositionが指定されていないと効果が出ないと思います。
例えば以下のようにしてみてはいかがでしょうか。

css
1#button {
2    position: fixed;
3    /* rightやbottomの初期値が必要なら指定 */
4}

値は必要に応じて変えてみてください。

投稿2021/11/03 09:34

編集2021/11/03 09:47

cerfweb

総合スコア1907

ho_

2021/11/03 10:58

ありがとうございます！動きました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

アニメーションで要素を動かしたい

関連した質問