Question

我有以下代码无效。它应该是一个div，当点击，向上移动并逐渐消失，然后再回来并重新出现。然而，每当我添加部件以便重新出现并重新出现时，第二部分在第二部分有机会转换之前执行。任何帮助使它延迟，以便div上升，然后像我想要的那样下降？我尝试过使用计时器，但我不认为我做得对。这是代码。

/*function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}*/
function clicked(x) {
    x.style.top="-50px";
    x.style.opacity="1";
    //sleep(500);
    //setTimeout(function(){alert('hi)}, 500);
    //x.innerHTML="女";
    x.style.top="50px";
    x.style.opacity="1";
}

Answer 1

您可以拆分两个动作并使用setTimeout

激活第二个部分

var click = document.getElementById('click');
click.addEventListener('click', function() {
    slideUp(click);
    setTimeout(function() { slideDown(click); }, 500);
});

请参阅JSFiddle

如果您可以使用jQuery，则可以使用delay

$('#click').click(function() {
    $(this).slideUp().delay(500).slideDown();
});

JSFiddle

在CSS转换完成之前执行的Javascript

1 个答案: