Question

当触发:hover时，我的动画当前有效。我想通过点击按钮启动动画，但我不知道如何与来自CSS的{{1}}进行互动？

JQuery

Answer 1

将:hover替换为另一个类，并使用jQuery将此类添加到单击的项目中这样，点击时，将添加新类并满足条件，从而触发动画。

Answer 2

这很简单。但是，您需要稍微修改一下CSS。

而不是使用：hover选择器，你想让它成为一个新类，比如说.StartAnimation。所以你的CSS变成了

.StartAnimation .mouth{
    animation-name: talk;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
 }

然后，在您的JQuery中，我们只需添加（和/或删除）此类：

$('#getQuote').click(function() {
    $('.frame').addClass('StartAnimation');
    // or toggle it, if a second click should undo the animation
    // $('.frame').toggleClass('StartAnimation');
});

另一种方法是，如果你想保持悬停效果，不想改变你的CSS，但仍然想要点击按钮上的动画（也许当用户点击其他东西时），将是在JQuery中使用.trigger（）方法：http://api.jquery.com/trigger/

$('#getQuote').click(function(){
    $('.frame').trigger('mouseenter');
});

Answer 3

非常简单：

$('.mouth').css({
 '<css property>':'<value>',
 '<css property>':'<value>',
 '<css property>':'<value>'...
});

Answer 4

添加一个类来启动动画，但是监听virtual事件以删除添加的类，以便可以再次启动动画。

virtual

animationend

$('#getQuote').click(function() {
  $('.mouth').addClass('animate');
});
$('.mouth').one('animationend', function(ev) {
  $('.mouth').removeClass('animate');
});

Answer 5

我会使用CSS类，因为：

.mouth.animated {
    animation-name: talk;
    animation-duration: 0.75s;
    animation-iteration-count: 5;
}

和JS：

$( "#getQuote" ).click(function() {
    $(this).prop('disabled', true); // disabling so animation can't be restarted until done
    $(".mouth").addClass("animated");
    setTimeout(function(){
        $( "#getQuote" ).prop('disabled', false);
        $(".mouth").removeClass("animated");
    }, 750*5)
});

Answer 6

一般来说我常常这样做：

//css
.animation{
   ......
}

//jquery
var animTimeout;
$('#getQuote').click(function() {
    clearTimeout(animTimeout);
    $('.mouth').addClass('animation');
    animTimeout = setTimeout(function(){
        $('.mouth').removeClass('animation');
    }, 'animation duration in ms')
});

使用JQuery控制CSS动画

6 个答案: