jQueryAnimation
Googleでログイン
問題1：検索窓にアニメーションをつけよう！
今回はデモのようにinputに入力しようとした時に中の文字が変わるようにしましょう！
あらかじめエディタに書くコード
<form>
<input type="text" placeholder="ここで検索">
</form>
¥HTML¥
form{
width: 300px;
height: 50px;
}
input{
width: inherit;
height: inherit;
box-sizing: border-box;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$("input").focusin(function(){
$(this).attr("placeholder","キーワードを入力");
})
$("input").focusout(function () {
$(this).attr("placeholder","ここで検索");
});
});
¥JavaScript¥
解説
attrはタグについているclassなどのプロパティの値を変えることができます。なので今回はplaceholderをプロパティに指定しています。そしてトリガーはそれぞれfocusが入った時と出て行った時にします。$(this)は今回の場合ではfocusされたinputと言う意味になります。
ログインして解答を見る
完了にする！
活動記録をTweetする
