0

ページの読み込み時にすべて非表示になる要素のグループがコンテナー内にあります。それらは、オンホバーでアニメーション化したい負の絶対位置によって隠されています。

ライブラリjqまたはmooのいずれかを使用できます

ホバー効果で同様の効果を取得しようとしています https://chrome.google.com/webstore/category/home?utm_source=chrome-ntp-icon

拡張スライダーのナビゲーション (横からポップ) とその情報 (下からポップ) でレイテンシーを確認できます。

これはレイテンシーのない非常にシンプルな moo バージョンです

http://jsfiddle.net/BVjna/38/

私が抱えている問題は、 moo morph または jq animate を使用して、絶対位置が異なるため、コンテナー内の各 div をリストする必要があることです。

私がむしろ持っているのは、 .container に適用されたクラスであり、 css によって内部要素を変形/アニメーション化し .container.hovered .el1{top:0;}ます。

どんな助けでも大歓迎です

4

2 に答える 2

1

私はmootoolsの経験がまったくありませんが、jqueryは知っています。これは模倣するのに非常に簡単な効果です。（ただし、私は主にグーグルの店を拠点にしています）。

ロールオーバーホバリングの置換例@jsFiddle

ここでの考え方は、スライドしているdivを計算して絶対位置を処理する代わりに、それらを1つのコンテナーに入れてロールアウトすることです。

これにより、すべての要素の開始位置を同じ場所に揃えるという問題も解決されるため、例の相対速度によってアコーディオン効果が生成されます（スライドではなくストレッチのように見えます）。

ご覧のとおり、複数のコントロールでも機能します。

編集：メインコンテンツをスライドさせる方法の例も追加しました（グーグルのように）。

于 2012-08-18T00:26:34.517 に答える
-1

CSS3 トランジションを使用した別のオプションを次に示します。

http://jsfiddle.net/davesters81/VMxyw/2/

ただし、古いブラウザでは機能しません。しかし、javascript や jQuery がまったくなくてもこれを達成できることを示しています。

于 2012-08-18T01:13:22.583 に答える