jrumbleで画像の座標がリセットされる

###前提・実現したいこと
jqueryで画像を揺らそうとしています
jrumbleというライブラリを使用した時にバグが発生しました。

###発生している問題・エラーメッセージ

jrumbleで画像を揺らすと座標設定がリセットされてしまう

###該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5    <title>ドラクエゲーム</title>
6	<meta charset="utf-8" />
7  <style>
8  html{
9    position: relative;
10  }
11  img{
12    position: absolute;
13    top: 200px;
14    left: 130px;
15  }
16  </style>
17</head>
18<body>
19  <img src="test.jpg" alt="" />
20  <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
21  <script src="js/jquery.jrumble.1.3.min.js"></script>
22  <script>
23    $(function () {
24
25      $('img').jrumble({
26        x:2,y:10
27      });
28      $('img').hover(function () {
29        $(this).trigger('startRumble');
30      },function () {
31        $(this).trigger('stopRumble');
32      })
33    });
34  </script>
35</body>
36</html>
37

行動規範の内容に同意します

回答1件

ベストアンサー

jrumbleのつくり上、今のままでは座標がresetされてしまいます。
※揺らす対象のcssのtop,leftを0に戻している。。

何をしたいのかわからないので勝手に解釈しますが、
もし位置を固定して揺らしたいなら、
styleでabsolute、およびtop,leftを指定する対象をdivに変えて、
imgタグをdivタグで囲んでください。

例:

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5    <title>ドラクエゲーム</title>
6    <meta charset="utf-8" />
7  <style>
8  html{
9    position: relative;
10  }
11  div{
12    position: absolute;
13    top: 200px;
14    left: 130px;
15  }
16  </style>
17</head>
18<body>
19  <div>
20    <img src="test.jpg" alt="" />
21  </div>
22  <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
23  <script src="js/jquery.jrumble.1.3.min.js"></script>
24  <script>
25    $(function () {
26
27      $('img').jrumble({
28        x:2,y:10
29      });
30      $('img').hover(function () {
31        $(this).trigger('startRumble');
32      },function () {
33        $(this).trigger('stopRumble');
34      })
35    });
36  </script>
37</body>
38</html>