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/

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

1 个答案: