Question

我是韩国学生编写jquery mobile编码的学生。我想制作移动网络应用程序！我开始摇动动作制作一些老虎机动画。我用CSS代码制作了它。但是为了开始这个动画，我不得不使用＆＃39; js＆＃39;。所以，我想从这个＆＃34; css＆＃34;

改变（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块，当.lot具有类.startAnimation时，每个块现在都具有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;
}

我如何将CSS动画更改为jquery animate（）代码？

1 个答案: