jquery - 如何将 CSS 动画更改为 jquery animate() 代码？

Question

我是一名来自韩国的学生，学习编码 jquery 移动。我想制作移动网络应用程序!我正在制作一些带有开始摇动 Action 的老虎机动画。我是用 CSS 代码制作的。但是为了开始这个动画，我不得不使用“js”。所以，我想从此“css”更改(jquery 动画代码)

<script>
window.onload = function() {
var myShakeEvent = new Shake({
threshold: 15
});
myShakeEvent.start();
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur () {
$('#lot').animate({

~~~here i want to input the animation.~~

}, 5000, function() {

});
}
};

~~~这是css动画~~

<div data-role="main" class="lot">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>


<style>
*{ padding: 38px;
margin:1px;
overflow: hidden;
}                               
.lot{
max-height: 880px;
max-width: 270px;

}
#a { 
background-size:contain;
background-image: url(b1.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
#b { 
background-size:contain;
background-image: url(b2.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground2 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
#c { 
background-size:contain;
background-image: url(b3.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground3 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
@keyframes animatedBackground {
from { background-position: 0 0; }
50% { background-position: 5000px 0; }
to { background-position: 0 0; }
}
@keyframes animatedBackground2 {
from { background-position: 0 0; }
50% { background-position: -5000% 0; }
to { background-position: 0 0; }
}
@keyframes animatedBackground3 {
from { background-position: 0 0; }
50% { background-position: 4000% 0; }
to { background-position: 0 0; }
}
</style>

Answer 1

CSS 动画和 jQuery 动画是两种不同的东西。

因为您已经定义了 CSS 动画关键帧，所以您只需应用 animation 属性即可。

假设 shakeEventDidOccur 是启动或应用动画的函数。

请注意，animation 属性被转移到一个单独的 CSS block 中，当 .lot 具有类 .startAnimation 时，每个 block 现在将具有 animation 属性，将在其中启动动画。

function shakeEventDidOccur () {
  $('#lot').addClass('startAnimation');
}

#a { 
  background-size: contain;
  background-image: url(b1.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
#b { 
  background-size: contain;
  background-image: url(b2.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
#c { 
  background-size: contain;
  background-image: url(b3.jpg);
  background-position: top;
  background-repeat: repeat-x;
  animation-iteration-count: 1;
  animation-direction: alternate;
}   
@keyframes animatedBackground {
  from { background-position: 0 0; }
  50% { background-position: 5000px 0; }
  to { background-position: 0 0; }
}
@keyframes animatedBackground2 {
  from { background-position: 0 0; }
  50% { background-position: -5000% 0; }
  to { background-position: 0 0; }
}
@keyframes animatedBackground3 {
  from { background-position: 0 0; }
  50% { background-position: 4000% 0; }
  to { background-position: 0 0; }
}

.lot.startAnimation #a {
  animation: animatedBackground 5s ease;
}
.lot.startAnimation #b {
  animation: animatedBackground2 5s ease;
}
.lot.startAnimation #c {
  animation: animatedBackground3 5s ease;
}