ログイン
問題2

jqueryでボタンを作ろう2

アイコン画像

問題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にしています。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる