Как переопределить CSS3 анимацию с помощью jQuery?

Question

Как переопределить CSS3 анимацию с помощью jQuery?

0

У меня есть анимация на пару элементов, которые продолжаются несколько секунд. Когда вы наводите курсор на один из них, я хочу, чтобы анимация CSS3 приостанавливалась и делала что-то, и когда зависание отрывается, чтобы продолжить анимацию.

Вот краткий пример скрипта, показывающий анимацию CSS3, и когда вы навешиваете над третьим баром (с классом.test), он должен переопределить CSS:

http://jsfiddle.net/TmFFx/

  @keyframes animation {
    from { width: 0;}
    to {width: 200px;}
}

@-webkit-keyframes animation {
    from { width: 0;}
    to {width: 100%;}
}

div {
    animation: animation 3s;
    -webkit-animation: animation 3s; 
    display:block;
    height:50px;
    background:red;
    margin-bottom:20px;
}
.change {width: 50%;}

  $('.test').hover( function() {
        $(this).toggleClass('change'); 
});

Есть идеи, как это сделать?

user2413333 06 окт. 2013, в 20:19

Источник

Теги:

javascript

jquery

css3

2 ответа

0

Как насчет, просто используйте CSS с transition? (в твоем случае)

div {
    display:block;
    width:100%;
    height:50px;
    background:red;
    margin-bottom:20px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
div:hover {width:50%;}

Демо: http://jsfiddle.net/TmFFx/5/

l2aelba 06 окт. 2013, в 14:52

Ещё вопросы

shujatAli · Accepted Answer · 2013-10-06T16-16-00.000Z

надеюсь, это поможет.

  $('.test').hover(
      function(){
    $('div').css("-webkit-animation-play-state", "paused");
//do your stuff here

    },
      function(){
        $('div').css("-webkit-animation-play-state", "running");
    });