Вращающиеся плитки;как отложить переход после зависания - PullRequest
Новая
       8

Вращающиеся плитки;как отложить переход после зависания

0 голосов
/ 17 марта 2012

Я новичок в Javascript.Вот что я хочу сделать.Мне нужен массив квадратных плиток, покрывающих окно, и я хочу, чтобы они переворачивались при наведении на них мыши.У меня уже есть одна плитка.См. Jsfiddle ниже.

http://jsfiddle.net/V7cS8/

Мне бы хотелось, чтобы плитка полностью перевернулась на обратную сторону, даже если пользователь не наводит курсор наполная длина анимации (в основном, даже если наведение очень короткое, я хочу, чтобы оно зафиксировало вращение).Я хочу, чтобы он удерживал свое перевернутое состояние в течение некоторого минимального времени, а затем возвращался, если пользователь больше не зависает.

Должен ли я пытаться сделать это полностью в javascript или по-прежнему использовать много CSS?

1 Ответ

2 голосов
/ 17 марта 2012

Вам вообще не нужен JavaScript / jQuery.Замените все ссылки .flip в вашем CSS на :hover: 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);
    });
});
...