2012-03-09 11 views
0

親の内側のインラインブロック要素divoverflow:hiddenで隠しています。私はその後leftプロパティ(負)を使用して元の子要素をオフセットしているので、隠されています。 CSS3のトランジションを使用して親に戻すことができますが、その負の値にかなり大きな数値(親divの幅)を割り当てなければなりません。そのタイミングはテキストの量に依存します。私はそれが完璧であることが必要です(ここで説明されていない理由で)。 leftの値が常にinline-block要素の幅の値と一致していれば完璧です。CSS3を使用して要素の負の「左」の位置を正確に設定します。

インラインブロック要素の幅を見つけて、その値をCSS3の左オフセットに適用する方法はありますか?

私はjQueryを使用する必要があると感じています。私は、ここの誰かがすばらしい解決策を持っていることを期待しています。ここ:)

例: http://jsfiddle.net/RD7Yv/1/

+2

これはあなたがやろうとしていることですか? http://jsfiddle.net/thirtydot/RD7Yv/4/ – thirtydot

+0

はい!どういうわけか私は100%が親要素の幅になると思いました。どのように私はこれを逃したのか分からない。ありがとう! – AlexKempton

+0

@ thirtydot、AlexKempton実際はそうです!だからこそ、三角形が要素を包み込んだのです。非常に素晴らしいフィドルbtw! – Christoph

答えて

0

これは動作するはずです、left:-100%を試してみてください。

EDITは: fiddle

+0

あなたのフィドルは本当に助けにはなりませんが、答えは私が必要としていたものです。また、コメントの彼の完璧な例のためにthirtydotへの信用! – AlexKempton

+0

sry、仕事がなければ洗練されているだろう;) – Christoph

0

あなただけの「CSS3トランジションを使用して親に戻って自分自身を明らかにする」にしたい場合は、すべての要素を移動し、ちょうどそれが場所での視認性だアニメーション化しないことが容易になるように思えます。例えば、ここではそれは不透明だアニメーションです:

http://jsfiddle.net/jfriend00/BqmQK/

すべてを、我々はJSを使用して/追加要素からクラスを削除することであり、CSS3は、私たちのために不透明度アニメーションを行います。このようにすると、元の位置に要素を残すことができ、サイズや位置の計算を行う必要はありません。

この同じアニメーションは、ホバーでトリガーされている場合はJavaScriptなしでも実行できます。あなたはここで働いていることがわかります

left: 0; 

:あなたが所定の位置にスライド画像を見たい場合は

は、その後、あなたはそれが最初の位置にあります設定することができます。

left: -100%; 

し、それをアニメーション: http://jsfiddle.net/jfriend00/P2H4Z/

+0

入力していただきありがとうございますが、実際にはスライド効果があります。 :) – AlexKempton

+0

@AlexKempton - どのような副作用ですか? – jfriend00

+0

「スライド」効果。 – AlexKempton

関連する問題