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