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

Question

我是Javascript的新手。这是我想做的。我想要一排方形瓷砖覆盖窗户，当鼠标滑过它们时，我希望它们能翻转过来。我已经有一块瓷砖了。请参阅下面的Jsfidle。

http://jsfiddle.net/V7cS8/

我希望它能让瓷砖完全翻转到背面，即使用户没有在整个动画长度内悬停（基本上，即使悬停时间很短，我也希望它能旋转）。我希望它在最短的时间内保持翻转状态，然后在用户不再悬停时返回。

我应该尝试完全用javascript来做这件事，还是仍然使用大量的CSS？

Answer 1

您根本不需要JavaScript/jQuery。用:hover替换CSS中的所有.flip引用：http://jsfiddle.net/V7cS8/1/

对于延迟，可以使用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);
    });
});