初めて投稿します。
よろしくお願いします。
JS投稿サイトからコピーしてきたものを
テキストファイルにペーストし、実際に動くかどうかを試してみました。
しかし、jsがうまく読み込まれていないのか
動きません。
どのようにすればよいのでしょうか。
正しい動きとしては
ボタンをクリックすると
ボタンが横に広がりフェードアウトし、送信ボタンとテキストエリアが表示されます。
また、今回のようなフロントエンドエンジニアの仕事に役立ちそうな
おすすめサイト、書籍などがありましたら
教えていただけませんか。
下記にソースを載せました。
出典元は
http://codepen.io/suez/pen/GrBdo
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" href="css/style.css"> 6<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 7<script type="text/javascript" src="js/button.js"></script> 8<title>Document</title> 9</head> 10<body> 11<button type="button">Click here</button> 12<div> 13<input type="text" placeholder="入力してください。"> 14<input type="submit" value="送信する"> 15<p>OK!</p> 16</div> 17</body> 18</html> 19
Javascript
1 2$(document).ready(function() { 3$(document).on("click", "button", function() { 4var _this = this; 5$(this).css("width", "350px"); 6setTimeout(function() . 7$(_this).css("opacity", 0); 8setTimeout(function() { 9$("div").show().css("opacity", 1); 10}, 300); 11}, 300); 12}); 13$(document).on("submit", "form", function() { 14$("input, #submit").css("opacity", 0); 15setTimeout(function() { 16$("input, #submit").hide(); 17$("p").show(); 18setTimeout(function() { 19$("p").css("opacity", 1); 20$("div").css("border-color", "green"); 21}, 1); 22}, 300); 23return false; 24}); 25}); 26
CSS
1 2body { 3background-color: rgba(200, 100, 50, 0.95); 4} 5 6h1 { 7text-align: center; 8color: white; 9} 10 11button, input, submit, div, p { 12box-sizing: border-box; 13-webkit-transition: .3s; 14transition: .3s; 15} 16 17form { 18display: block; 19position: relative; 20margin: 20px auto 0; 21width: 350px; 22} 23 24button { 25display: block; 26margin: 0 auto; 27width: 250px; 28height: 80px; 29border: 1px solid transparent; 30border-radius: 10px; 31background-color: rgba(100, 50, 250, 0.95); 32color: white; 33font-size: 18px; 34cursor: pointer; 35} 36 37button:hover { 38background-color: rgba(50, 10, 255, 0.95); 39} 40 41#submit:hover { 42background-color: rgba(50, 10, 255, 0.95); 43} 44 45div { 46display: none; 47opacity: 0; 48position: absolute; 49top: 0; 50left: 0; 51width: 350px; 52height: 80px; 53border: 3px solid rgba(100, 50, 250, 0.95); 54border-radius: 10px; 55background-color: white; 56} 57div #txt { 58width: 350px; 59margin-top: 150px; 60} 61div #txt span { 62color: #fff; 63} 64 65input { 66position: absolute; 67top: -5px; 68left: 0; 69width: 250px; 70height: 80px; 71border: 0; 72padding: 10px; 73color: rgba(200, 100, 50, 0.95); 74font-size: 18px; 75background: transparent; 76} 77 78input:focus { 79outline: 0; 80} 81 82input:focus > div { 83border-color: rgba(50, 200, 250, 0.95); 84} 85 86#submit { 87position: absolute; 88top: 17px; 89left: 50px; 90width: 80px; 91height: 40px; 92border: 1px solid transparent; 93border-radius: 3px; 94background-color: rgba(100, 50, 250, 0.95); 95color: white; 96cursor: pointer; 97font-size: 14px; 98} 99 100p { 101display: none; 102opacity: 0; 103font-size: 18px; 104color: green; 105text-align: center; 106margin-top: 25px; 107} 108
回答3件
あなたの回答
tips
プレビュー