Использование JQuery для остановки анимации css. Как правильно это сделать?

Я только что реализовал CSS-анимацию на такой странице:

@-webkit-keyframes backdrop-roll{
    to { background-position-x:100%; }
}
body
{
background-image:url('http://www.wallmay.net/thumbnails/detail/20120331/pokemon%20fields%20ruby%201920x1200%20wallpaper_www.wallmay.com_2.jpg');
background-size: 800px 650px; 
-webkit-animation: backdrop-roll 8s linear infinite;
-webkit-animation-direction:normal
}

Есть кнопка, которая меняет фон, и я хочу, чтобы изображение оставалось неподвижным, поэтому я попробовал это через JQuery:

$('body').css('-webkit-animation-play-state','paused');

Это было то, что пришло в голову, но почему-то вместо этого все перестает работать. Это ново для меня, поэтому я не уверен, что даже искать (я нахожу, как остановить это с помощью css, а не события jquery).


javascript html jquery css css-animations
person null    schedule 29.04.2014    source источник
comment
используя $ ('body'), вы нацеливаетесь на всю свою DOM и приостанавливаете всю анимацию. Вместо этого выберите точный элемент DOM, который вы планируете приостановить - $ ('. PicSlider'). Css (...). Также создайте скрипку с тем, что вы сделали. Это поможет сообществу лучше помочь вам.   -  person VtoCorleone    schedule 29.04.2014
comment
Это должно помочь: stackoverflow.com / questions / 10158448 /   -  person stackErr    schedule 29.04.2014

Ответы (1)


arrow_upward
2
arrow_downward

Я бы поместил свойства состояния воспроизведения анимации в их собственные классы следующим образом:

.play{
    -webkit-animation-play-state: running;
}
.pause{
    -webkit-animation-play-state: paused;
}

Затем вы можете использовать jQuery для управления анимацией:

$(document).ready(function(){
    $('body').addClass('play');

    $('#pause').click(function(){
        if($('body').hasClass('play')){
            $('body').removeClass('play');
        }
    });

    $('#resume').click(function(){
        if(!$('body').hasClass('play')){
            $('body').addClass('play');
        }
    });
});

Вот пример: http://jsfiddle.net/F2nQM/

person GrumpyKitten    schedule 29.04.2014
comment
Благодарность за это и за то, что нашли время сделать / опубликовать пример. Я модифицировал свой код этим, и теперь он работает так, как я хочу, еще раз спасибо. - person null; 30.04.2014
comment
Еще есть функция сброса позиции анимации? Это полностью отвечает тому, что было в OP, но теперь я понимаю, что новый фон находится в том положении, в котором был старый, когда он остановился. - person null; 30.04.2014
comment
Затем я бы переместил свойства анимации в их собственный класс (.backdrop-roll). Одним из недостатков перезапуска анимации CSS является то, что вам нужно либо добавить небольшую задержку, либо удалить элемент из DOM и повторно добавить. Ни один из них не является идеальным ИМО, но он работает. Вот тот, который работает с небольшой задержкой: http://jsfiddle.net/F2nQM/1/ - person GrumpyKitten; 30.04.2014
comment
Огромное спасибо! Вы мне очень помогли. - person null; 01.05.2014