使用 jQuery 创建/销毁多个 div 错误

Question

我有一个奇怪的，但在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。

感谢对任何可以花一些时间帮助我的人的帮助。

/汤米

Answer 1

粉红色的div 仅显示一次，因为每个磁贴仅调用一次函数。这是因为您使用的是 one（） 事件处理程序。

您的代码执行以下操作：

• 在磁贴悬停时，它会执行 css 动画
动画
• 完成后，将触发事件侦听器函数（但仅在每个磁贴的动画第一次结束时）
事件侦听器
• 函数创建粉红色磁贴，并将事件侦听器添加到此新磁贴，以便在光标离开磁贴时触发
• 触发此功能时，将删除粉红色磁贴

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