Intereting Posts
Как добавить значок вкладки браузера (favicon) для веб-сайта? Кэширование статического HTML-сайта Прокрутка и установка div сверху в модальном теле при нажатии на выбранный контейнер Закрыть текущая вкладка Текст CSS выравнивает нижнюю часть контейнера элементы списка строковых блоков беспорядочны, когда один пуст Должен ли я использовать спрайт-подобный метод для эскизов на моем веб-сайте? Показать добавленные значения на одной странице перед отправкой в ​​форму с несколькими вводами отправка текстового поиска с использованием jsoup Select2 не отображается при добавлении динамически в первый раз Отображение различного всплывающего изображения при наведении текста на текст с помощью javascript Как получить идентификатор пользователя кнопки только что нажал? Excel не применяет формат mso-number из HTML Javascript modulo Абсолютно позиционированные элементы с одним и тем же z-индексом: какой элемент будет сверху?

как приостановить анимацию css при зависании с помощью jquery

Как мы приостанавливаем анимацию CSS в ее состоянии, когда пользователь наводит элемент на элемент.

CSS

.container { height: 160px; width: 450px; background: gray; overflow: hidden; } .marquee { height: 140px; width: 400px; margin: 10px; background: red; position: relative; animation: marquee 10s linear infinite; } @keyframes marquee { 0% {left: 100%;} 100% {left: -100%;} } .marquee:hover { /* pause animation. this works but with compatibility issues animation-play-state is still in W3C working draft */ animation-play-state: paused; } 

HTML

 

JAVASCRIPT

 $(document).raedy(function() { $(.marquee).hover { //mouseenter() & mouseleave() // puase animation } }); 

моя ссылка jsfiddle здесь https://jsfiddle.net/gamss0wa/6/

вы можете приостановить анимацию с помощью css

 .marquee:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }