4

私はこの結果を達成しようとしています:

ツールチップ

特徴：

  1. ツールチップは、クリックするとすぐに表示されます。
  2. FadeIn と位置のアニメーションが同時に開始され、位置のアニメーション中に要素がフェードアウトします。
  3. 一度に複数のツールチップを表示できます(2 つ以上のボタンが次々にクリックされた場合)。
  4. メッセージ コンテンツは動的 JSON オブジェクトから取得されます。

ツールチップのオンクリックを複製して表示することはできますが、何らかの理由でアニメーション化したり、コンテンツを置き換えたりすることができません。

新しい複製された要素を選択する方法がわかりません。

以下のエラー例、またはjsFiddleを参照してください。

html :

<div id="ptsAlert">
    <span class="ptsAlert">
        message
        <div class="ptsAlert-arrow"></div>
    </span>
</div>

<table>
    <tr>
        <td class="btn">01</td>
        <td class="btn">02</td>
        <td class="btn">03</td>
    </tr>
    <tr>
        <td class="btn">04</td>
        <td class="btn">05</td>
        <td class="btn">06</td>
    </tr>
</table>

CSS:

h1 {
    font-size:50px;
    margin:10px;
}
body {
    text-align:center;
}
td {
    border: 1px solid;
    padding: 5px;
    cursor: pointer;
}

.ptsAlert {
  display:none;
  background-color: #EE0000;
  color: #FFFFFF;
  font-size: 27px;
  font-weight: bold;
  line-height: 1.7em;
  margin: 10px auto;
  padding: 0 10px;
  position: absolute;
  text-align: center;
}

.ptsAlert-arrow{
  border-color: #EE0000 transparent transparent;
  border-style: solid;
  border-width: 8px;
  bottom: -15px;
  height: 0;
  left: 3px;
  position: absolute;
  width: 0;
}

jQuery:

//Function to show points alerts
$('.btn').click(function(event) {
    var points = 10;
        $('#ptsAlert').clone(true, true).contents()
            .appendTo('body')
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            //.hide().fadeIn();
});

コメント行.hide().fadeIn()により、次のエラーが発生します。

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMWindow.getComputedStyle]
4

1 に答える 1

4 
//Function to show points alerts
$('.btn').click(function(event) {

      $('#ptsAlert').find("> span").clone(true, true)
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            .appendTo($('body'))
            .hide().fadeIn(); //this line doesn't break the code (anymore)
});

最適化

    var $body=$(document.body);
    var $ps=$("#ptsAlert");
    var $tltp = $ps.find(">span");
    $body.on("click",".btn",function(event) {
       $tltp.clone(true, true)
            .css('top', (event.pageY - 75) + 'px')
            .css('left', (event.pageX - 10) + 'px')
            .css('display', 'inline-block')
            .appendTo($body)
            .hide().fadeIn();
      });
于 2013-02-08T11:31:52.637 に答える