在CSS轉換完成前執行的Javascript

我有以下代碼無法正常工作。它應該是一個div，當點擊時，向上移動並消失，然後回落並重新出現。然而，無論何時添加零件回來並重新出現，第二部分在第二部分有機會轉換之前執行。任何幫助，使其延遲，使div上升，然後像我想要的那樣下降？我嘗試過使用計時器，但我不認爲自己做得對。這是代碼。在CSS轉換完成前執行的Javascript

/*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"; 
}

來源

2014-01-07 Veloncia

我會嘗試jquerys .after（）如果jquery可用 – Cracker0dks

您可以分割的兩項議案，並激活第二部分與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

來源

2014-01-07 08:44:47

非常感謝你Olaf，你解決了我的問題。：d – Veloncia

在CSS轉換完成前執行的Javascript

回答

相關問題