用JQuery控制CSS动画
用JQuery控制CSS动画
提问于 2017-01-25 14:21:25
当:hover被触发时，我的动画正在工作。相反，我想通过单击按钮启动动画，但我不知道如何与CSS从JQuery进行交互
//CSS
.mouth{
top: 268px;
left: 273px;
position: relative;
}
.frame:hover .mouth {
animation-name: talk;
animation-duration: 0.75s;
animation-iteration-count: 5;
}
@keyframes talk {
0%, 100%{
top: 268px;
left: 273px;
}
50% {
top: 308px;
left: 273px;
}
}
//JQuery
$('#getQuote').click(function() {
});回答 5
Stack Overflow用户
发布于 2017-01-25 14:23:42
用另一个类替换:hover，并使用jQuery将该类添加到单击的项中。
这样，当单击时，将添加新类并满足条件，这将触发动画。
Stack Overflow用户
发布于 2017-01-25 14:29:46
这很直截了当。不过，您需要稍微修改一下CSS。
与其使用“悬停选择器”，不如让它成为一个新类，比方说.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，但仍然想在按钮点击动画(也许当用户点击其他东西时)，将使用.trigger()方法在JQuery：http://api.jquery.com/trigger/中
$('#getQuote').click(function(){
$('.frame').trigger('mouseenter');
});Stack Overflow用户
发布于 2017-01-25 14:25:55
非常简单：
$('.mouth').css({
'<css property>':'<value>',
'<css property>':'<value>',
'<css property>':'<value>'...
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41853969
复制相关文章
相似问题
腾讯云开发者
