I create a function that when mouseover trigger a shake animation. Now I need to make sure it shakes for ever after the mouseover. Thank you guys.
function shake(e, oncomplete, distance, time) {
var time = 500;
var distance = 5;
var start = (new Date()).getTime();
animate();
function animate() {
var now = (new Date()).getTime();
// Get current time
var elapsed = now - start;
// How long since we started
var fraction = elapsed / time;
// What fraction of total time?
if (fraction < 1) {
var x = distance * Math.sin(fraction * 4 * Math.PI);
e.style.left = x + "px";
// We're aiming for a smooth 40 frames/second animation.
setTimeout(animate, Math.min(25, time - elapsed));
} else {
// Otherwise, the animation is complete
if (oncomplete) oncomplete(e);
// Invoke completion callback
}
}
}
function shakeme(event1) {
shake(event1.target);
}
document.getElementById("wood").addEventListener("mouseover", shakeme, false);
<button id="wood">Hello World</button>
Aucun commentaire:
Enregistrer un commentaire