jqueryでボタンを作ろう2

Question

問題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¥

Answer 1

解答ソースコード

              $(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¥

jqueryでボタンを作ろう2

問題2：jqueryでボタンを作ろう2

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説