読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

effect("shake")を使うのはあんまりよくないかもしれない

jQuery

Macのログイン画面とか、WordPressのログイン画面とかで
ログインに失敗するとボタンとかフォームとかがブルブル揺れるあの「ブルブル」を再現したくなったので、
effect("shake")を使うことにしたのだが、
Shake Effect | jQuery UI API Documentation

$("div").click(function () {
      $(this).effect("shake", { times:3 }, 300);
});
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
    <script type='text/javascript' src='./js/jquery-1.4.4.min.js'></script>
    <script type='text/javascript' src='./js/jquery-ui-1.8.20.custom.min.js'></script>
    <script type="text/javascript">
     $(document).ready(function() {
        $("div").click(function () {
          $(this).effect("shake", { times:3 }, 300);
        });
     });
    </script>
    <style type="text/css">
      div {
        position: relative;
        top: 250px;
        left: 250px;
        width: 500px;
        height: 500px;
        background-color: black;
      }
      div div {
        position: relative;
        top: 0px;
        left: 0px;
        width: 500px;
        height: 100px;
      }
      div div:nth-of-type(1) {
        background-color: red;
      }
      div div:nth-of-type(2) {
        background-color: blue;
      }
      div div:nth-of-type(3) {
        background-color: green;
      }
      a.hoge {
        border: 5px solid #000;
        border-radius: 6px;
        margin-bottom: 100px;
        background-color: #22ff22;
      }
    </style>
  </head>
  <body>
    <div>
      <div><a class="hoge">リンクをクリック!!</a></div>
      <div><p>ダミー</p></div>
      <div><p>ダミー</p></div>
    </div>
  </body>
</html>

で、見ためはこんな感じ。クリックすると同じ箇所でシェイクされるのを期待していたのだが、

あれ、シェイクする場所が変わっている…?

それで、処理が実行されているときのCSSを追ってみたら、
処理実行中は left: auto になっていたのであった。

なんかeffect("shake")は使い勝手があんまり良くないという事が判明したので、
下のサイトみたく普通にanimateを使えば良いのではないかという気がしていた。
jQuery シェイクする | macaroni-works notes