0

写真の順序付けられていないリストがあり、1 つにカーソルを合わせると、左側の 2 つの写真がフェードアウトし、その場所に div がテキストと共に表示されます。divの配置を除いて、私はこれを機能させました-私はこれを試しました:

div.position({my: 'left top', at: 'left top', of: other_list_item});

しかし、それは {left: 0, top: 0} のオブジェクト (新しい場所) を返すだけです。

また、div を別の li 要素に入れようとしましたが、それでもダメです。div HTML は次のとおりです。

<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>Jon Jensen</p><p>Chief Technical Officer</p><p>London, England</p></div>

編集私はJSFiddleの例に取り組んでいますが、入れることがたくさんあるので、準備ができたらidkします。とにかく、私はこのちょっとした楽しみについて言及するのを忘れていました:

アンカーしようとしている要素で .position() を単独で呼び出すと、正しいオフセットが返されますが、他の要素で position() を使用して位置を一致させようとすると、何も起こりません。

4

1 に答える 1

0

私は質問をよく理解していませんでしたが、私の推論から、フェードアウトした画像の代わりに新しいdivを配置しようとしていることがわかりました。そのため、状況に合ったコードをいくつか示します

$('div').click(function(){
    //get the positions of the divs to be faded out
    var prev_position = $(this).prev('div').position();
    var next_position = $(this).next('div').position();
    //create and position new divs
    $(this).insertBefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">Replacing DIV</div>');
    $(this).insertAfter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">Replacing DIV</div>');
    //hide the divs
    $(this).prev('div').fadeOut();
    $(this).next('div').fadeOut();
});

親要素に位置が設定されている場合、 .position() は親要素に相対的な位置を取得し、必要に応じて設計が崩れる場合があります。したがって、代わりに、WINDOW を基準とした前後の div の座標を取得でき、次のようなものを取得できます。

    function getPosition($el){
        //get the offset coordinates of the recently clicked link
        var offset = $el.offset();
        var top = offset.top;
        var left = offset.left;
        //get position of this link relative to the window
        var rel_top = top - $(window).scrollTop();
        var rel_left = left - $(window).scrollLeft();
    }
于 2013-07-31T19:39:09.913 に答える