Question

I’m brand spankin’ new to Javascript. Here’s what I want to do. I want an array of square tiles covering the window and I want them to flip over when the mouse goes over them. I already have a single tile. See the Jsfiddle below.

http://jsfiddle.net/V7cS8/

I would like it so that the tile will flip over completely to the back side, even if the user doesn’t hover for the entire animation length (basically, even if the hover is only very brief, I want it to commit to rotating). I want it to hold its flipped state for some minimum amount time and then return if the user is no longer hovering.

Should I be trying to do this entirely in javascript or still using a lot of CSS?

Answer 1

You don’t need JavaScript/jQuery at all. Replace all .flip references in your CSS by :hover: http://jsfiddle.net/V7cS8/1/

For delays, you can use transition-delay: 1s.

Apply transition-delay:1s; (delay 1 second, with vendor prefixes) to the normal selector, and transition-delay:0s to the :hover selector. The result is that the backflip will be delayed for 1 second.

Demo: http://jsfiddle.net/s9xcP/2/

Outcome of comment chain: When existing animations have to be completed first, regardless of the hover state, a JavaScript timeout have to be used:

Demo: 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);
    });
});