jQueryのポジショニングとアニメーション

Question

だから私は、コードの一部を持っている：

jQuery.fn.center = function(parent) { 
parent = this.parent(); 
this.css({ 
"position": "absolute", 
"top": ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
"left": ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
}); 
return this; 
} 

このコードは要素をつかむと、親の中央に移動します。うまく動作します。それが何をしているのかとは別にやりたいことがいくつかあります。

1. その親の他のすべての要素の上に浮動する必要があります。 zインデックスは多かれ少なかれ。私はZインデックスを適用しようとしましたが、動作していないようです。もし私がそれを間違ってやっているかもしれない、あるいはより良い方法があれば私は夢中になる。

2. これは元の位置に戻るために必要です。ブロックがCSSを介してページに配置され、ユーザーがクリックすると、ブロックが中央に移動しますコードがすでに行っているので、ページのユーザーが終了ボタンをクリックすると、そのボタンを元の位置に戻すようにプログラムすることができます。 jQueryで変数を渡すことができるかどうかはわかりません。

3. このオプションは美学のためのものであり、必要とは思わないが少し余裕があれば欲しい。私は、ブロックがその位置からページの中央にスライドして戻ってくるようにしたいと思います。私が述べたように、これは単なる美学であり、私は本当にそれが起こる必要はありません。

私を助けることができる誰かに非常に感謝します。

Answer 1

同様の要件を実装しようとしましたが、探していたすべての機能が必要です。試してみてくださいDEMO

私はそれがその親の他のすべての要素の上に浮動する必要があります。 Aインデックス 多かれ少なかれ。私はZインデックスを適用しようとしましたが、動作していないようです。 私はそれが間違っているかもしれない場合、またはより良い 方法がある場合私は夢中です。

このような場合は、常に1001以上の範囲でz-インデックスを使用します。デモでさえ、うまく動作します。あなたがまだあなたのために働いていない場合は、これを試してみてください。

は、私はそれはそれはしていた位置に戻って移動する必要があります。これが機能する方法を、 は ユーザーがクリック、それを移動するときにブロックつもり（CSS経由）ページ上に配置し、されていますコードが が既に行っているように、ページの中央に移動します。ユーザーが終了ボタンをクリックすると、 ボタンをプログラムして元の場所に戻すことができますか？ jQueryで変数を渡すことができるかどうかわかりません。

閉じる（終了）ボタンをクリックすると、.data APIを使用して要素の元の位置が保存され、元の位置に戻されました。

このオプションは、美学のためのより多くのである、と私はそれが必要と認めるませんが、少し余分な時間があれば がそれをしたいと思います。私はブロック をその位置からページの中央にスライドさせて戻したいと思います。 がそこに飛び出すことに反対しています。私が述べたように、これはちょうど美学です と私は本当にそれが起こる必要はありません。

指定した時間内に目的地の位置へ、そこから元の位置に要素を超越します.animateの代わりにCSSを使用することができます。

Answer 2

他のすべての要素の上に浮動するためには、z-indexを使用する必要がありますが、各要素が配置されていることを確認する必要があります親を含むz-indexの値で始まります。親も配置する必要があります。

元の位置に戻すには、現在のleftとtopのオフセットを取得する必要があります。 clickイベントリスナーで、要素を元の位置に戻します。

jQuery.fn.center = function(parent) { 
    var oldTop = this.css('top'); 
    var oldLeft = this.css('left'); 
    parent = this.parent(); 
    this.css({ 
    "position": "absolute", 
    "top": ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
    "left": ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
    }); 
    this.click(function(e) { 
    this.css('top', oldTop); 
    this.css('left', oldLeft); 
    }); 
    return this; 
} 

（だけではなく、位置にジャンプの）アニメーションを行うために、あなたはjQueryのを使用してleftとtop値をアニメーション化することができます。あなたはthis.offset()を使用して検討する必要があります

this.animate({ 
    'top': ((($(parent).height() - this.outerHeight())/2) + $(parent).scrollTop() + "px"), 
    'left': ((($(parent).width() - this.outerWidth())/2) + $(parent).scrollLeft() + "px") 
}); 

EDIT。これは、メソッドleftとtopを含むオブジェクトを返します。

var offset = this.offset(); 
var oldTop = offset.top; 
var oldLeft = offset.left;