Javascript Div只移动一次

我试图通过Intel XDK制作一个简单的应用程序。我创建了这个按钮，但在加载页面/应用程序后它只向下移动了一次。如果有人能给我建议，我将不胜感激。提前谢谢

代码：

功能按钮单击（）{
//提醒（‘感谢使用我们的应用！！！’）；
document.getElementById（'button'）.style.boxShadow=“无”；
document.getElementById（'button'）.style.top+=“10px”；
setTimeout（函数（）{
document.getElementById（'button'）.style.top=“-10px”；
document.getElementById（'button'）.style.boxShadow=“0px 5px 10px#3a926d”；
}, 500);
}
函数onLoad（）{
intel.xdk.device.setRotateOrientation（“纵向”）；
}
document.addEventListener（“intel.xdk.device.ready”，ondevicerady，false）；
函数ondevicerady（）{
//设定方向
intel.xdk.device.setRotateOrientation（“纵向”）；
//intel.xdk.device.setRotateOrientation（'any'）；
intel.xdk.device.hideSplashScreen（）；
}

#按钮{
背景色：#29c786；
填充：10px；
宽度：55%；
高度：30px；
线高：30px；
文本对齐：居中；
边际上限：0；
颜色：白色；
位置：绝对；/*也可以固定*/
左：0；右：0；
顶部：0；底部：0；
保证金：自动；
盒影：0px 5px 10px#3a926d；
边界半径：5px；
}
页脚{
字号:8 ;；
位置：绝对位置；
底部：5px；
左：5px；
}

opengallery
版本0.1&复制托马斯·霍布扎2017

功能按钮单击（）{
//提醒（‘感谢使用我们的应用！！！’）；
document.getElementById（'button'）.style.boxShadow=“无”；
document.getElementById（'button'）.style.top=“10px”；
setTimeout（函数（）{
document.getElementById（'button'）.style.top=“-10px”；
document.getElementById（'button'）.style.boxShadow=“0px 5px 10px#3a926d”；
}, 500);
}

#按钮{
背景色：#29c786；
填充：10px；
宽度：55%；
高度：30px；
线高：30px；
文本对齐：居中；
边际上限：0；
颜色：白色；
位置：绝对；/*也可以固定*/
左：0；右：0；
顶部：0；底部：0；
保证金：自动；
盒影：0px 5px 10px#3a926d；
边界半径：5px；
}
页脚{
字号:8 ;；
位置：绝对位置；
底部：5px；
左：5px；
}

---

opengallery

这种任务不需要JavaScript

下面是一个CSS解决方案：

CSS

#按钮{
背景色：#29c786；
填充：10px；
宽度：55%；
高度：30px；
线高：30px；
文本对齐：居中；
边际上限：0；
颜色：白色；
位置：绝对位置；
左：0；右：0；
顶部：0；底部：0；
保证金：自动；
盒影：0px 5px 10px#3a926d；
边界半径：5px；
过渡：均为0.5s；
字体系列：Arial、Helvetica、无衬线字体；
}
#按钮：激活{
变换：translateY（10px）；
盒影：无；
}

---

OPEN GALLERY

请直接在此处包含代码，而不是来自第三方网站。然后解释你的问题和你为解决它所做的尝试是的，我知道，但我不会让我问这个问题，因为我没有投票，因为只使用CSS是解决这个问题的最好方法。我的回答只涉及修改原始代码。非常感谢您的帮助。这是一个比希菲尼更干净的解决方案，但他的方案也确实很有帮助。