旋转瓷砖;如何在悬停后延迟转换

Question

我是Junk的新品牌spankin。这就是我想要做的。我想要一个覆盖窗口的方形瓷砖阵列，我希望它们在鼠标移过它们时翻转。我已经有一块瓷砖了。见下面的Jsfiddle。

http://jsfiddle.net/V7cS8/

我希望它能让瓷砖完全翻转到背面，即使用户没有悬停整个动画长度（基本上，即使悬停只是非常简短，我希望它提交旋转）。我希望它保持其翻转状态一段最小时间，然后如果用户不再悬停则返回。

我应该尝试在javascript中完全执行此操作还是仍然使用大量CSS？

Answer 1

你根本不需要JavaScript / jQuery。通过.flip：http://jsfiddle.net/V7cS8/1/

替换CSS中的所有:hover引用

对于延迟，您可以使用transition-delay: 1s。

将transition-delay:1s;（延迟1秒，包含供应商前缀）应用于普通选择器，将transition-delay:0s应用于:hover选择器。结果是后空翻会延迟1秒钟。

演示：http://jsfiddle.net/s9xcP/2/

评论链的结果：当必须首先完成现有动画时，无论悬停状态如何，都必须使用JavaScript超时：

演示：http://jsfiddle.net/nY8U8/224/

$(function(){
    $('.box').hover(function(){
        var $this = $(this);

        // If not not-ready, do nothing
        // By default, the value is `undefined`, !undefined === true
        var not_ready = $this.data('box-hover-not-ready');
        if (!not_ready) {
            $this.addClass('hover');
        } else {
            // If bosy, defer hover transition
            $this.data('box-hover-hovered', true);
        }
    }, function() {
        var $this = $(this);
        $this.removeClass('hover');

        // Mark state as "busy"
        $this.data('box-hover-not-ready', true);
        var timeout = setTimeout(function() {
            var hovered = $this.data('box-hover-hovered');
            if (hovered) {
                // If a hover transition is deferred, activate it now.
                $this.addClass('hover');
                $this.data('box-hover-hovered', false);
            }
            // Mark state as "not busy"
            $this.data('box-hover-not-ready', false);
        }, 2000); /* 2 seconds*/

        // Remove previous timeout, set new one.
        clearTimeout($this.data('box-hover-timeout'));
        $this.data('box-hover-timeout', timeout);
    });
});