現在、webでおみくじを作成しています。
おみくじの結果をフェードインで表示させたいのですが、それが上手くできず止まってしまっています。。
恐れ入りますがご教授お願いいたします。m(_ _)m
やりたいこと
画像をクリックorスマホを振るとランダムで出て来た結果がフェードインで表示される。
javascript
1<script> 2 //おみくじの結果をランダムで表示 3 function getOmikuji () { 4 var omikuji = ["id1","id2","id3"]; 5 var index = Math.floor(Math.random() * omikuji.length); // ランダムで0-2の値を取得 6 var id = omikuji[index]; // ランダムで取得した値に対応するidを取得 7 var el = document.getElementById(id); // idに対する要素を取得 8 var result = el.outerHTML; // div内のtextを取得 9 10 document.getElementById('result').innerHTML = result; // 結果を表示 11 } 12 13 //結果の表示・非表示 14 $(function(){ 15 16 $('#btn').click(function(){ 17 //フェードインで表示 18 $('result').fadeIn(); //⇦ここが効きません 19 //ボタンを非表示にする 20 $(this).hide(); 21 }); 22 23 }); 24 25 26 //スマホを振るとおみくじ結果がでる 27 $(document).ready(function() { 28 $(this).gShake(function() { 29 var clickMe = document.getElementById('btn'); 30 clickMe.click(); 31 }); 32 }); 33</script>
css
1body{ 2 background-color: #4c4c4c; 3 color: #FFFFFF; 4} 5main{ 6 margin: 0 auto; 7 max-width: 700px; 8} 9h1{ 10 text-align: center; 11 line-height: 1.5; 12} 13h1 img{ 14 width: 100%; 15} 16p{ 17 text-align: center; 18} 19.txt-1{ 20 font-size: 14px; 21 line-height: 1.5; 22} 23input{ 24 display: block; 25 max-width: 300px; 26 margin: 0 auto; 27} 28input:hover{ 29 transform: rotate(10deg); 30} 31 32#wrap{ 33 display: none; 34} 35table{ 36 background-color: #FFFFFF; 37 border: 5px solid #FF0000; 38 color: #000000; 39 margin: 50px auto; 40 padding: 3px; 41 width: 350px; 42} 43th{ 44 border: 2px solid #FF0000; 45 color: #FF0000; 46 font-size: 30px; 47} 48td + td{ 49 border-left: 1px dashed #FF0000; 50} 51td{ 52 text-align: center; 53 padding-top: 10px; 54 vertical-align: top; 55} 56td span { 57 -ms-writing-mode: tb-rl; 58 writing-mode: vertical-rl; 59 margin: 0 auto; 60 white-space: nowrap; 61 width: 1em; /* firefox対策 */ 62 line-height: 1em; /* firefox対策 */ 63 text-orientation: upright; 64} 65.title td{ 66 color: #FF0000; 67} 68.sns{ 69 margin: 60px auto 0; 70 width: 75px; 71} 72footer{ 73 margin-top: 30px; 74 text-align: center; 75} 76
回答3件
あなたの回答
tips
プレビュー