0

親オブジェクトにカーソルを合わせると「吹き出し」を表示する関数を作成しました。ただし、バブルは、その高さによって計算されるように、親オブジェクトの上に表示されるように設定されています。

これをレスポンシブなデザインにしようとしているので、幅と高さは両方とも動的です。次のコードを使用して、ウィンドウのサイズを変更した後に関数を実行しようとしました。

$(window).resize(function() {
    $('.popup').popup();
}).trigger('resize');

これでうまくいくように見えますが、かなりバグがあります。私がまとめたこのjsfiddleをチェックすることで、私が何を意味するかを理解できます。

吹き出しは、ウィンドウのサイズが変更される前は正常に機能しますが、サイズが変更されてトリガー オブジェクトの 1 つにカーソルを合わせると、吹き出しが 5 回程度繰り返されるようにアニメーション化されます。

これはレスポンシブ デザイン向けに書かれたものではないことは間違いありません。また、私は JS 開発者ではありません。そのため、明確な改善点があれば、喜んで受け入れます。:D

4

2 に答える 2

1

これは、popup() がイベントに複数回バインドされるためです。これを使うだけです。

$(document).ready(function() {
$('.popup').popup();
});

そして、マウスオーバー時のポップアップの位置を設定します。

于 2013-01-08T08:39:04.427 に答える
0

削除する -

$(window).resize(function () {
    $('.popup').popup();
  }).trigger('resize');

そして追加

  $('.popup').popup();

これを参照してください - http://jsfiddle.net/im4aLL/jMG4K/2/

于 2013-01-08T09:05:18.867 に答える