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

粉红色的 div 只显示一次，因为您的函数只为每个图块调用一次。这是因为您正在使用one()事件处理程序。

您的代码执行以下操作：

  • 在平铺悬停时，它会执行 CSS 动画
  • 动画完成后，触发事件侦听器功能（但仅在每个图块的动画第一次结束时）
  • 您的事件侦听器函数创建粉红色磁贴并向此新磁贴添加事件侦听器，以在光标离开磁贴时触发
  • 当这个功能被触发时，粉红色的瓷砖被删除

所有这些都可以通过 css3 来实现。我已经更新了您的 jsfiddle 代码，以向您展示如何仅使用 css3 使用悬停和转换来执行此操作。然后，如果您愿意，可以使用一些 javascript 动态更新悬停图块的内容：http:
//jsfiddle.net/XHQxH/9/

于 2012-10-05T04:37:41.217 回答