2012-08-02 5 views
6

私は4つの州間で定期的にフリップするいくつかのHTML正方形の "ライブタイル"をコーディングする必要があります。 は基本的に私は必要なもの、このプラグインはhttp://www.drewgreenwell.com/projects/metrojsを何ですが、あります 2.だけではなく、4つの状態の間で決定的なAPI /プラグインは、それは、HTML/jQueryのサイトでライブタイルの管理を可能に? 私はWindows 8アプリケーションを構築していません.Htmlで反転するライブタイルをシミュレートしようとしています。うまくいけば、すべての主要なブラウザで動作させることになります。おかげさまで HTMLでフリップライブタイルをシミュレート

+0

ドリューのプラグインは、前後2つの状態のタイルのみをサポートしています。タイルごとに4つ以上の州をサポートする必要があります。そのように動作するようにカスタマイズすると、jqueryの経験があまりない人には時間がかかるかもしれません – Voidsbane

+0

実際には複数の状態をサポートしています。下の私の答えを見てください。 – Voidsbane

答えて

-2

jQueryまたはjQuery UIを使用してこの効果を得ることができます。 jQueryには.animate().show().hide()などの方法があります。

+0

ありがとう、私はちょうどそのようにカスタマイズする必要があります。これを箱から出したプラグイン/ apiがあれば、メトロスタイルのアプリとライブタイルがますます一般的になっているので、私は不思議に思っていました。 – Voidsbane

+0

CSS3のトランジション/アニメーションに切り替えられていない限り、jqueryアニメーションの使用はお勧めしません。スクリプトでアニメーションを実行するとスムーズに実行できない –

4

私は、これは何が必要だと思う私はちょうどHTMLでひっくり返すライブタイルをシミュレートしようとしている、と がうまくいけば、それはすべての主要なブラウザ

で働いています。 フリップ! http://lab.smashup.it/flip/

0

これはかなり簡単なはずです。具体的に:

  • オーバーフローが隠されていることを確認してください1つのタイルサイズ
  • に/サイズ親のdivをクリップあなたのNタイルサイズの内容
  • とDIVを作成します。
  • その後、すべては問題ないはずCSS

を使用して、以前のコンテンツ&新しいコンテンツへの変換を適用します。

+0

ありがとう!私はまだjqueryの新機能ですが、これは簡単な解決策かもしれません。 – Voidsbane

1

あなたはCSS3/HTML5遷移にフリップを行う方法上(下)この記事を読んで検討するかもしれません。 Javascriptではない(したがってAPIを持たない)が、私の経験では、トランジション効果はより滑らかで信頼性が高いようだ。最後に

Animated Element Wall With CSS

+0

ありがとう!私はそれを見てみましょう – Voidsbane

5

Drew's plug-inは、複数のタイルの状態をサポートし、彼はサンプルのカップルを提供しているようです。 Sample 1およびSample 2。私はライブタイルシミュレーションに必要なことをするようです。

関連する問題