javascript - jQuery 的多个 div 创建/销毁错误

Question

我在 Webkit 浏览器上混合了 CSS3/HTML5/Javascript(虽然没有尝试过任何其他浏览器)。

试试这个 fiddle : http://jsfiddle.net/tbergeron/XHQxH/

尽可能快地将鼠标悬停在多个“图 block ”上，您会发现它有时会停止工作。

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(这对诊断来说用处不大)请查看我在此处链接的 fiddle 。

编辑:问题似乎是“webkitTransitionEnd”只被触发一次。所以下次转换结束时，什么也不会被调用。我想知道:有什么方法可以重置此行为，以便在它结束时重置并可以再次触发？

所以要继续，当您多次将鼠标悬停在许多图 block 上时，它会停止显示粉红色的 div。

感谢任何愿意花时间帮助我的人。

/汤米

Answer 1

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

您的代码执行以下操作:

• 在平铺悬停时执行 css 动画
• 一旦动画完成，事件监听器功能就会被触发(但只有在每个图 block 的动画第一次结束时)
• 您的事件监听器函数创建了粉色图 block ，并向这个新图 block 添加了一个事件监听器，以便在光标离开图 block 时触发
• 当这个函数被触发时，粉红色的瓷砖被删除

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