問題2:jqueryでボタンを作ろう2
今回は前回(jqueryでボタンを作ろう1)の応用問題です。デモのようにマウスが入ってきたところを中心に円が広がり、出たところを中心に円が縮小するようなアニメーションを作ってみましょう!
あらかじめエディタに書くコード
<div class="btn">ここをクリック<span></span></div>
¥HTML¥
.btn{
position: relative;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
cursor: pointer;
border: 2px solid black;
overflow: hidden;
}
.btn span{
position: absolute;
background-color: #bbbbbb;
border-radius: 50%;
transform: translate(-50%,-50%);
opacity: .3;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$(".btn").on("mouseenter",function (e) {
var position = $(this).offset(),
x = e.pageX - position.left,
y = e.pageY - position.top;
$(this).find("span").css({ "top": y, "left": x }).animate({ width: "400px", height: "400px" });
}).on("mouseleave",function(e){
var position = $(this).offset(),
x = e.pageX - position.left,
y = e.pageY - position.top;
$(this).find("span").css({ "top": y, "left": x }).animate({ width: "0px", height: "0px" });
});
});
¥JavaScript¥
解説
前回はクリックされた位置から広げたら終わりだったのですが、今回は出るときに縮小しなければならないのでmouseleaveの時も同じようにマウスの位置を取得し、そこを中心に縮むようにcssでtop、leftを指定し、animateでwidth、heightを0pxにしています。
ログインして解答を見る
完了にする!
活動記録をTweetする