Возврат JQuery для перехода CSS3

Я ищу резервную копию JQuery/JS для простого кода перехода CSS3. Мой javascript действительно базовый, поэтому мне нелегко найти и написать код замены. Я уже проверил модернизацию, но я не очень разбирался в документации.Возврат JQuery для перехода CSS3

Это значок, который использует transform: rotate(20deg) при зависании (это не проблема, поскольку он поддерживает IE). Но проблема перехода, я использую

.icon{ 
....other css code 
-webkit-transition: all 300ms linear; 
-moz-transition: all 300ms linear; 
-o-transition: all 300ms linear; 
-ms-transition: all 300ms linear; 
transition: all 300ms linear; 
}

является ли запасной вариант JQuery для этого? Я думал о fadeIn();, но я понятия не имею, как бы это сделать. что-то вроде этого ?:

<script>$(icon).hover(function(){$(icon).fadeIn("slow");}); </script>

и как я пусть браузер знаю, что это запасной вариант, так что они только выбрать JQuery, если это IE?

источник

2013-03-28 fumpr

использование jquery animate –

Красота использования переходов CSS заключается в том, что если она не поддерживается, изменение все равно происходит, просто не анимируется. Я бы придерживался этого. – Bill

@BillyMathews да действительно, теперь он мигает в IE, что неплохо, но я хочу дать каждому тот же опыт, поскольку 35% людей (я из Бельгии) по-прежнему использую IE. – fumpr

Transit переводит jQuery для анимации вызовов анимации CSS3 и возвращается к регулярным js для неподдерживаемых браузеров.

В качестве альтернативы вы можете продлить $ .support, чтобы проверить переходы like this и использовать анимацию jQuery, когда тест для них терпит неудачу.

источник

2013-03-28 13:33:49

Я думаю, вы ошибаетесь. Как указано, «Transit ухудшает старые браузеры, просто не делая преобразований (поворот, масштаб и т. Д.), Все еще делая стандартный CSS (непрозрачность, marginLeft и т. Д.) Без какой-либо анимации». Все резервные копии должны быть запрограммированы самостоятельно. –

@ René «Революция на основе фрейма Если вы хотите отступить к классической анимации, когда переходы не поддерживаются, просто вручную переопределите .transitition для .animate». –

Я думаю, что у вас уже есть ответ, вы должны использовать modernizr, это не сложно, как вы думаете, есть два способа, которыми modernizr указывает, какие доступны функции, а какие нет, первый из них - через набор классы CSS в элементе HTML:

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

, если она доступна, она будет отображаться имя, если оно не доступно оно появится название с «холостом» preffix как «не-Flexbox», второй один - через javascript:

if(!Modernizr.csstransitions)

У Modernizr есть набор bool переменные ean, которые могут сказать вам, доступно ли это или нет, поэтому, если вы хотите установить резервную копию для своей анимации, я бы предложил вам использовать классы Modernizr для указания анимации только для браузеров, которые имеют эту функцию:

.csstransitions #element{ 
-webkit-transition: ... ; 
-moz-transition: ... ; 
-o-transition: ... ; 
-ms-transition: ... ; 
transition: ... ; 
}

, а затем создать яваскрипт файл с переменными, которые Modernizr имеют проверки, если эта функция доступна, если это не то указать анимации:

if(!Modernizr.csstransitions) 
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

это может дать вам представление о том, как работает Modernizr (я надеюсь,), в любом случае, если у вас есть проблема, вы можете проверить это blog post Я сделал давно, он говорит что-то вроде этого wi th некоторые другие вещи, такие как CSS3PIE (это не спам, я просто пытаюсь помочь).

источник

2013-03-28 13:46:57 mechdeveloper

спасибо! собираюсь попробовать сейчас – fumpr

, вы можете также расширить $ .support, если вам нужно только обнаружить переходы ... и, кстати, какой эффект должен иметь fadeIn на элементе, который уже отображается? –

Ну, я просто хотел показать, как работает Modernizr, я не уверен, что такое анимация, поэтому я не знаю, какой эффект fadein должен иметь для элемента, который уже отображается. – mechdeveloper

Возврат JQuery для перехода CSS3

ответ

Смежные вопросы