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')

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

1 个答案: