0

私は奇妙なことをしていますが、Webkit ブラウザーで CSS3/HTML5/Javascript が混在しています (他は試していません)。

このフィドルを試してみてください： http://jsfiddle.net/tbergeron/XHQxH/

複数の「タイル」にできるだけ早くカーソルを合わせると、動作しなくなることがあります。

JavaScriptコードは次のとおりです。

 $('.tile').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
    var tile = this;

    // Hide Title label
    $(tile).find('.title').hide();

    var bigTileHtml = '<div class="bigTile">';
    bigTileHtml = bigTileHtml + '<div class="title">Tile Title Holy Cow Yeah</div>';
    bigTileHtml = bigTileHtml + '<div class="description">Tile description goes here.</div>';
    bigTileHtml = bigTileHtml + '</div>';

    // Create a new bigTile
    var bigTile = $(bigTileHtml).appendTo('.tiles');

    // Sets bigTile's position
    var position = $(this).position();
    bigTile.css('top', position.top + 4);
    bigTile.css('left', position.left + 4);

    bigTile.mouseout(function() {
        // Show Title label
        $(tile).find('.title').show();
        bigTile.remove();
    });

    bigTile.show();
});

HTML/CSS (診断にはあまり役に立ちません) については、私がそこにリンクしたフィドルを確認してください。

編集:問題は、「webkitTransitionEnd」が一度だけ起動されることです。そのため、次にトランジションが終了すると、何も呼び出されません。私は疑問に思っています:この動作をリセットして、終了時にリセットして再度起動できるようにする方法はありますか?

再開するには、多くのタイルに複数回カーソルを合わせると、ピンクの div の表示が停止します。

時間を割いて助けてくれる人に助けてくれてありがとう。

/トミー

4

1 に答える 1

1

関数はタイルごとに 1 回しか呼び出されないため、ピンク色の div は 1 回だけ表示されます。これは、one()イベント ハンドラを使用しているためです。

コードは次のことを行います。

  • タイルにカーソルを合わせると、CSS アニメーションが実行されます
  • アニメーションが終了すると、イベント リスナー関数がトリガーされます (ただし、各タイルのアニメーションが最初に終了するときのみ)。
  • イベント リスナー関数はピンク色のタイルを作成し、この新しいタイルにイベント リスナーを追加して、カーソルがタイルから離れたときにトリガーされるようにします。
  • この関数がトリガーされると、ピンクのタイルが削除されます

これらはすべて css3 だけで実現できます。jsfiddle コードを更新して、ホバーとトランジションを使用して css3 だけでこれを行う方法を示しました。次に、いくつかの javascript を使用して、ホバー タイルのコンテンツを動的に更新することができます:
http://jsfiddle.net/XHQxH/9/

于 2012-10-05T04:37:41.217 に答える