ログイン

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

jQueryAnimationの問題

jQueryAnimation

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にしています。
完了にする!
LINEの友達追加でお役立ち動画をGET!!