ちょうどクリックされたdivの上に隠れたdivを表示

Question

私は3つのdivを持っています。そのうちの1つをクリックすると、divが消え、挨拶状が表示されます。この挨拶のdiv要素が固定位置に現れる瞬間

http://jsfiddle.net/mauricederegt/pknpb/1/

：これは、すべての作業、私のバイオリンを参照してくださいました。ちょうどクリックされたdivの上に表示されるようにするには？

これはまったく可能ですか？

希望誰かが

はお時間

（もクリックされたときのdivを強制的にダウンしている理由は、PS？）

Answer 1

.greetingsは相対的な位置付けを持っているため、3つのdivがドロップダウンします。 「私は、私はdidnのだと思い

var offset = $(this).hide(500).offset(); 
var score = 'Hello'; 
$('.greet').text(score); 

$('.greet') 
     .show() 
     .css({ 
      top: offset.top - $('.greet').height(), 
      left: offset.length, 
      opacity: 1, 
     }) 
     .stop() 
     .delay(200) 
     .animate({top: 20, opacity: 0},1000); 

がfiddle

Answer 2

それはだとあなたは要素の位置を取得することができ、コンテナをありがとう私を助けることができます.position（）を使用するか、.offset（）を使用してドキュメントに相対的にオフセットされます。この場合

、それはこのようなものになります。絶対、とあなたは、高さと何かをする必要がある場合があります：あなたはおそらく.greetクラスのポジションを作りたいと思いますしかし

$('.ht').click(function hint() { 
    var x = $(this).offset().left;//get offset relative to document 
    $(this).hide(500); 
    score = 'Hello'; 
     $('.greet').text(score); 

    $('.greet') 
      .hide() 
      .css({ 
       bottom: 20, 
       left: x, //add x variable here 
       opacity: 1, 
      }) 
      .show() 
      .stop() 
      .delay(200) 
      .animate({'bottom':75, opacity: 0},1000); 
}); 

を。それはメッセージだと

Answer 3

私は、コンテナ内の各「ヒント」を置くことをお勧めします：

<div class="hint-container"> 
    <div class="hint"> HINT! </div> 
    <div class="greet"> Greetings </div> 
</div> 

コンテナに固定サイズとの相対位置を与える：

.hint-container { 
    position: relative; 
    width: 100px; 
    height: 20px; 
} 

をザ・あなたは絶対的に与えることができますコンテナの位置をすべてのコンテナを占めて、それらの1つを非表示にする：

ここから^をやっていくことができます^

私はそれがはっきりしていることを望みます。

Answer 4

申し訳ありませんが、私はこのためにjqueryのコードを与えるのに十分な精通していません。しかし、私はあなたがclass greetでdivを処理するメソッドにclickイベントを送らなければならないと信じています。そして、ポジションアブソリュートセットで、クラスgreet divの左と上をイベントに格納されている左上と左に設定します。