Div只移动一次

Question

我正在尝试通过英特尔XDK制作一个简单的应用程序。我创建了这个按钮但是在加载页面/应用程序后它只向下移动了一次。如果有人会建议我，我将非常感激。提前谢谢。

代码：

function buttonClick() {
    //alert('Thanks for using our app!!!');
    document.getElementById('button').style.boxShadow = "none";
    document.getElementById('button').style.top += "10px";
    setTimeout(function(){ 
      document.getElementById('button').style.top = "-10px";
        document.getElementById('button').style.boxShadow = "0px 5px 10px #3a926d";
        }, 500);
    }
    
function onLoad() {
    intel.xdk.device.setRotateOrientation("portrait");
}
    
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);               
function onDeviceReady(){
    // set orientation
    
    intel.xdk.device.setRotateOrientation('portrait');
//    intel.xdk.device.setRotateOrientation('any');

    intel.xdk.device.hideSplashScreen();   
} 

#button {
    background-color: #29c786;
    padding: 10px;
    width: 55%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: 0;
    color: white;
    position:absolute; /*it can be fixed too*/
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;
    box-shadow: 0px 5px 10px #3a926d;
    border-radius: 5px;
}

footer {
    font-size: 8;
    position: absolute;
    bottom: 5px;
    left: 5px;
}

<div id="button" onClick="buttonClick()"><b>OPEN GALLERY</b></div>
<footer>VERSION 0.1; &copy; Tomas Hobza 2017</footer>

Answer 1

此类任务不需要JavaScript。

这是一个CSS解决方案：

<强> CSS

#button {
  background-color: #29c786;
  padding: 10px;
  width: 55%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 0;
  color: white;
  position:absolute;
  left:0; right:0;
  top:0; bottom:0;
  margin:auto;
  box-shadow: 0px 5px 10px #3a926d;
  border-radius: 5px;
  transition: all 0.5s;
  font-family: Arial, Helvetica, sans-serif;
}

#button:active {
  transform: translateY(10px);
  box-shadow: none;
}

<div id="button"><b>OPEN GALLERY</b></div>

<强> JSFiddle

Answer 2

＆＃13;

＆＃13;

function buttonClick() {
        //alert('Thanks for using our app!!!');
        document.getElementById('button').style.boxShadow = "none";
        document.getElementById('button').style.top = "10px";
        setTimeout(function(){ 
        	document.getElementById('button').style.top = "-10px";
            document.getElementById('button').style.boxShadow = "0px 5px 10px #3a926d";
        }, 500);
    }

＆＃13;

 #button {
        background-color: #29c786;
        padding: 10px;
        width: 55%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin-top: 0;
        color: white;
        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;
        box-shadow: 0px 5px 10px #3a926d;
        border-radius: 5px;
    }
    
    footer {
        font-size: 8;
        position: absolute;
        bottom: 5px;
        left: 5px;
    }

＆＃13;

<div id="button" onClick="buttonClick()"><b>OPEN GALLERY</b></div>

＆＃13;

＆＃13;

＆＃13;

变化：

document.getElementById('button').style.top += "10px";

要

document.getElementById('button').style.top = "10px";