CSS Переход, эквивалентный jQuery fadeIn (), fadeOut (), fadeTo ()

у меня есть это

$('#button1').click(function(){ $('#header_bg').fadeTo(15, 0, function() { document.getElementById('header_bg').style.fill = '#FF0000'; }).fadeTo('slow', 1); $('#header_text1').fadeOut(250); $('#header_text2').fadeIn(250); }); 

Я пытаюсь улучшить производительность мобильных устройств (на iOS) на тяжелом веб-сайте jQuery. Я прочитал iOS обрабатывает переходы CSS намного лучше, чем jQuery. Каков наилучший способ сделать эти iOS дружественными?

Я писал об этом ( http://css3.bradshawenterprises.com ), но, короче говоря, вы просто добавляете свойства переходов, а затем изменяете свойство.

Итак, вместо $('#header_text1').fadeOut(250); , вы будете использовать в своем CSS:

 -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; 

, то в вашем JS,

 $('#header_text1').css({'opacity', 0}); 

Если вы хотите что-то запустить, когда произошла анимация, есть события для перехода. И этот огонь.

Это совсем другой подход, но люди пытались перевести между JS и CSS несколькими способами:

http://playground.benbarnett.net/jquery-animate-enhanced/ – хорошая ссылка для этого.

демо попробуйте это

 @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadeout { from { opacity: 1; } to { opacity: 0; } } .in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 705ms; -moz-animation-timing-function: ease-in-out; -moz-animation-duration: 705ms; } .fade.out { z-index: 0; -webkit-animation-name: fadeout; -moz-animation-name: fadeout; } .fade.in { opacity: 1; z-index: 10; -webkit-animation-name: fadein; -moz-animation-name: fadein; } 

Переходы CSS – это то, что вы ищете,

Вот хорошая демонстрация, показывающая эффект затухания изображения: http://cssnerd.com/2012/04/03/jquery-like-pure-css3-image-fade-in/

вот какой-то демо-код:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script src="jquery.js"></script> <script> $(document).ready(function() { var change = true; $('#ba').click(function() { if(change) { $('#a').css('opacity', ' 0'); $('#b').css('opacity', '1'); } else { $('#a').css('opacity', '1'); $('#b').css('opacity', '0'); } change = !change; }); }); </script> <style> .fadeeffect { -webkit-transition: opacity 250ms ease-in-out; -moz-transition: opacity 250ms ease-in-out; -o-transition: opacity 250ms ease-in-out; transition: opacity 250ms ease-in-out; } </style> </head> <body> <button type="button" id="ba" > Click Me! </button> <div> <p id="a"class="fadeeffect"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <p id="b" class="fadeeffect"> eafdsaf dsa dgsf dgadg dfg dagfadgLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </body> </html> 
  • Трансформация анимации iOS8 не работает, как ожидалось
  • Обнаружение IOS 8 с помощью jQuery
  • Загрузите несколько аудиофайлов с jquery и выполните обратный вызов при завершении
  • У большого всплывающего окна есть проблемы с прокруткой на iPhone
  • Элемент jquery мерцает после перехода и scrolltop на ios
  • Должен ли я использовать jQuery или jQuery мобильные или IPad веб-страницы?
  • Использование jquery mobile tap вместо щелчка
  • JS: Как работает свойство event.touches?
  • jQuery Mobile 1.1.0 RC1 Изменение HREF для сообщений AJAX в Safari iOS
  • не разрешено загружать локальный ресурс ios9 cordova app
  • PhoneGap 1.2 запускает цель <a href> дважды в IOS 5
  • Interesting Posts

    Как прокручивать вверх в UITableView, когда текущая панель вкладок снова нажата?

    Установить выбранную ячейку по умолчанию в UITableViewController

    Предел размера приложения IOS и данные, хранящиеся на устройстве

    HOWTO отслеживает автоматическое обновление подписки в iOS In-App Purchase?

    Как вызвать функцию из модели, которая связывает делегата модели с делегатом?

    iPhone Название приложения (трамплин и цель) списка разрешенных специальных символов

    Загрузка на S3, в iOS или в Node.js

    iOS: имя изображения, используемого в XIB

    Как вы оживляете подслои слоя UIView во время анимации UIView?

    Проблемы с добавлением расширения наклейки к iMessage

    AVPlayer "Не удается завершить действие"

    Что такое PngCrush в iOS?

    Странное поведение после изменения продолжительности экспозиции и возврата к AVCaptureExposureModeContinuousAutoExposure

    Что делать, если я не могу найти заголовок GPUImage.h для рамки GPUImage?

    Вызов функции «ABRecordCopyValue» возвращает объект corefoundation с сохранением +1

    Давайте будем гением компьютера.