如何使用shake.js 启动css 动画？

Question

我目前正在使用“jquery mobile”制作移动网络应用程序。 我想把我的背景动画放在开始摇晃的动作中。 我从 git.hub 下载了“shake.js”并自己输入代码。但它不起作用。请帮助我。谢谢！！

<div data-role="page" id="lotp" data-url="lotp">

       <div class="lot" data-position="fixed">
        <div data-role= "content" id="a"></div>
        <div data-role= "content" id="b"></div>
        <div data-role= "content" id="c"></div>
        </div>     

<script>
window.onload = function() {
//create a new instance of shake.js.
var myShakeEvent = new Shake({
    threshold: 15
});
// start listening to device motion
myShakeEvent.start();
// register a shake event
window.addEventListener('shake', shakeEventDidOccur, false);
//shake event callback
function shakeEventDidOccur () {
    //put your own code here etc.
   $('#lot').addClass('startAnimation');
    }
        };
</script> 

而css动画代码就是这样..

.lot{
padding: 10px;
margin:10px;
overflow: hidden;
max-height: 680px;
max-width: 270px;

 }
#a  { 
background-size: auto;
background-image: url(lot1.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
 #b { 
background-size:auto;
background-image: url(lot2.jpg);
background-position: top;
background-repeat:repeat-x;    
animation: animatedBackground2 5s ease;
animation-iteration-count: 1;
animation-direction: alternate;
}   
 #c { 
background-size:auto;
background-image: url(lot3.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; }
}

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

Answer 1

尝试从$('#lot')更改为$('.lot')