Q&A
タイトル「アニメーション」とありますが、質問本文にアニメーション要素が見当たりません。タイトルには具体的な要件を記載してください
jQueryにて、指定したボックスを斜め下へ移動させる、という処理を行いたいと思っております。
しかし一通り調べを進め、超初心者の私で考えうることはあらかた試したのですが、解決できませんでした。
コードのどこが間違っていて、どう修正すれば良かったのか、どなたかご教授頂けますか？
html,jQuery
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>アニメーション</title> 6 <link rel="stylesheet" type="text/css" href="test.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 8 <script> 9 $(function(){ 10 $("#button").click(function(){ 11 $("#button").animate 12 ({"margintop":"500px", 13 "marginleft":"500px"},2000); 14 }); 15 }); 16 </script> 17</head> 18<body> 19 <div id="button"> 20 <p id="button">button</p> 21 </div><!-- button --> 22 23 24</body> 25</html> 26
css
1@charset "UTF-8"; 2/* reset */ 3body, h1, h2, h3, h4, h5, h6, p, address, 4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td { 5 margin: 0; 6 padding: 0; 7 border: none; 8 font-style: normal; 9 font-weight: normal; 10 font-size: 100%; 11 text-align: left; 12 list-style-type: none; 13 border-collapse: collapse; 14} 15 16textarea { font-size: 100%; vertical-align:middle;} 17img { border-style: none; display: block; } 18hr { display: none; } 19em{font-style: normal} 20input{line-height:auto;vertical-align:middle;} 21strong.more{color:#c30} 22a{text-decoration: none;} 23 24html { 25 26} 27 28body { 29 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; 30} 31 32* { 33 -webkit-box-sizing: border-box; 34 -moz-box-sizing: border-box; 35 -o-box-sizing: border-box; 36 -ms-box-sizing: border-box; 37 box-sizing: border-box; 38} 39 40/* 上の部分は気にせずここから書く */ 41 42#button { 43 width: 320px; 44 height: 180px; 45 background-color: #fdd; 46 cursor: pointer; 47} 48 49#button p { 50 line-height: 180px; 51 font-size: 30px; 52 text-align: center; 53 position:absolute; 54 top:0px; 55 left:0px; 56} 57
そもそもjQueryでアニメーションを行うために必要な公文がない、ということでしょうか？
すみません、そのレベルの初心者でして。
違います。
>指定したボックスを斜め下へ移動させる、という処理を行いたい
この内容だと「アニメーション」との関連性が見えません。
そういえば、同一ページ内にidは重複不可という規則があります。そこは問題ないですか？JavaScriptは特に影響を受ける規則です。
どこの何をどんな感じで斜め下に移動するのでしょうか？
buttonというidが２箇所に設定されています。
idは同じページに複数箇所指定することはできません
<div id="button">
<p id="button">button</p>
</div><!-- button -->
この部分のボタン及び、"button"という文字を２秒間かけて右下へ動かしたいと思っております。
では、どちらかをidに、どちらかをclassなどにすれば解決でしょうか？
div と pをどう使いたいかによります。
divが囲むだけのものなら実体はpなのでpにidをふって
divにはwrapとか適当な名称でidやclassを振って下さい
ちなみに右下ってどのくらいの距離を想定していますか？
buttonという文字を囲うボックスごと、クリック後ページの中央にスライドする、という動きを想定しております。
回答2件
0
こんにちは。
キャメルケースで書いてみてください。
js
1 $("#button").animate 2 ({"marginTop":"500px", 3 "marginLeft":"500px"},2000); 4 });
CSS プロパティリファレンス - CSS: カスケーディングスタイルシート | MDN
キャメルケース - Wikipedia
投稿2021/02/08 05:07
総合スコア36946
0
ベストアンサー
とりあえずcssで#buttonにposition:absolute指定をして
animateではtopとleftに適当な数値をいれてください
投稿2021/02/08 04:55
総合スコア116694
試しましたが、解決しませんでした。
$(function(){
$("#button").on('click',function(){
$(this).css({"position":"absolute"}).animate({"top":"500", "left":"500"},2000);
});
});
</script>
<div class="wrap">
<p id="button">button</p>
</div>
※解決しない回答に安易にBAを与えないようにしてください
申し訳ございません。ご丁寧な返答本当にありがとうございます！解決いたしました。何かありましたら、また宜しくお願いいたします、、、！
あなたの回答
tips
プレビュー
