JavaScript一個接一個的動畫

我有以下代碼。有五列按鈕。當第一列中的任何按鈕被點擊時，第二列，第三列和第四列將滑出。當第二列，第三列或第四列被點擊時，第五列將滑出。JavaScript一個接一個的動畫

當第一列被點擊時，我想第二列先滑出，然後是第三列，然後是第四列。現在他們在同一時間滑出。我試圖增加延遲，但他們沒有任何區別。

document.getElementById("column_1").innerHTML = ""; 
 
document.getElementById("column_1").innerHTML = "<span style='color:#FFFFFF'> Account Group </span>"; 
 

 
// for (var prop in cc) 
 
for (prop = 0; prop < 10; prop++) { 
 
    // document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + cc[prop] + ', ' + amt[prop] + '</button></div>'; 
 
    document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>'; 
 
} 
 

 
function myFunction2(e) { 
 
    test = e; 
 
    console.log(e); 
 
    document.getElementById("column_2").innerHTML = ""; 
 
    document.getElementById("column_2").innerHTML = "<span style='color:#FFFFFF'> GL Accounts </span>"; 
 
    document.getElementById("column_3").innerHTML = ""; 
 
    document.getElementById("column_3").innerHTML = "<span style='color:#FFFFFF'> GL Balance </span>"; 
 
    document.getElementById("column_4").innerHTML = ""; 
 
    document.getElementById("column_4").innerHTML = "<span style='color:#FFFFFF'> GL Name </span>"; 
 
    document.getElementById("column_5").innerHTML = ""; 
 

 
    // for (var prop3 in gl) 
 
    for (prop3 = 0; prop3 < 20; prop3++) { 
 
    document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 
    document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 
    document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 

 
    // document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">' + gl[prop3] + '</button></div>'; 
 
    // document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">' + po[prop3] + '</button></div>'; 
 
    } 
 
} 
 

 
function myFunction4(e) { 
 
    test = e; 
 
    console.log(e); 
 
    document.getElementById("column_5").innerHTML = ""; 
 
    document.getElementById("column_5").innerHTML = "<span style='color:#FFFFFF'> Breakdown </span>"; 
 
    // for (var prop5 in cc) 
 
    for (prop5 = 0; prop5 < 5; prop5++) { 
 
    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + ' class="list-group-item" onclick="myFunction5(this.id)">' + "Breakdown " + prop5 + '</button></div>'; 
 
    } 
 
} 
 

 
function myFunction5(e) { 
 
    test = e; 
 
    console.log(e); 
 
    window.open("", "", "width=500,height=500"); 
 
} 
 

 
$(function() { 
 
    // run the currently selected effect 
 
    function runEffect1() { 
 
    var selectedEffect = "slide"; 
 
    var options = {}; 
 

 
    // Run the effect 
 
    $("#column_2").effect(selectedEffect, options, 500, callback); 
 
    $("#column_3").effect(selectedEffect, options, 500, callback); 
 
    $("#column_4").effect(selectedEffect, options, 500, callback); 
 

 
    }; 
 

 
    function runEffect2() { 
 
    var selectedEffect = "slide"; 
 
    var options = {}; 
 
    $("#column_5").effect(selectedEffect, options, 500, callback); 
 
    } 
 

 
    // Callback function to bring a hidden box back 
 
    function callback() { 
 
    setTimeout(function() { 
 
     $("#effect").removeAttr("style").hide().fadeIn(); 
 
    }, 100); 
 
    }; 
 

 
    // Set effect from select menu value 
 
    $("#column_1").on("click", function() { 
 
    runEffect1(); 
 
    return false; 
 
    }); 
 

 
    $("#column_2").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 

 
    $("#column_3").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 

 
    $("#column_4").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 
});

@import url(https://fonts.googleapis.com/css?family=Roboto:300); 
 
.ui-effects-transfer { 
 
    border: 2px dotted gray; 
 
} 
 

 
.login-page { 
 
    width: 360px; 
 
    padding: 8% 0 0; 
 
    margin: auto; 
 
} 
 

 
.form { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #FFFFFF; 
 
    max-width: 360px; 
 
    margin: 0 auto 100px; 
 
    padding: 45px; 
 
    text-align: center; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
 
} 
 

 
.form input { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
} 
 

 
.form button { 
 
    font-family: "Roboto", sans-serif; 
 
    text-transform: uppercase; 
 
    outline: 0; 
 
    background: #4778b7; 
 
    width: 100%; 
 
    border: 0; 
 
    padding: 15px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    -webkit-transition: all 0.3 ease; 
 
    transition: all 0.3 ease; 
 
    cursor: pointer; 
 
} 
 

 
.form button:hover, 
 
.form button:active, 
 
.form button:focus { 
 
    background: #4778b7; 
 
} 
 

 
.form .message { 
 
    margin: 15px 0 0; 
 
    color: #b3b3b3; 
 
    font-size: 12px; 
 
} 
 

 
.form .message a { 
 
    color: #4CAF50; 
 
    text-decoration: none; 
 
} 
 

 
.form .register-form { 
 
    display: none; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    z-index: 1; 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.container:before, 
 
.container:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.container .info { 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 

 
.container .info h1 { 
 
    margin: 0 0 15px; 
 
    padding: 0; 
 
    font-size: 36px; 
 
    font-weight: 300; 
 
    color: #1a1a1a; 
 
} 
 

 
.container .info span { 
 
    color: #4d4d4d; 
 
    font-size: 12px; 
 
} 
 

 
.container .info span a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 

 
.container .info span .fa { 
 
    color: #EF3B3A; 
 
} 
 

 
body { 
 
    background: #4778b7; 
 
    /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(right, #4778b7, #4778b7); 
 
    background: -moz-linear-gradient(right, #4778b7, #4778b7); 
 
    background: -o-linear-gradient(right, #4778b7, #4778b7); 
 
    background: linear-gradient(to left, #4778b7, #4778b7); 
 
    font-family: "Roboto", sans-serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.row.no-gutter { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 

 
.row.no-gutter [class*='col-']:not(:first-child), 
 
.row.no-gutter [class*='col-']:not(:last-child) { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="grid" class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
    <div class="col-md-2"> 
 
     <div id="column_1"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_2"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_3"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_4"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <div id="column_5"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-10-18 user3163920

你既可以使用回撥功能從效果觸發下一個動畫或使用隊列把所有的動畫在同一個隊列，並添加延遲 – LordNeo

可能重複[我怎樣才能動畫順序使用jQuery多個元素？ ]（https://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery） – LordNeo

不知道你是否看到我的答案，但片段現在正在完全工作！（你需要在擴展模式下查看它） – FluffyKitten

而不是試圖建立超時相匹配的速度，你可以使用回調連鎖它們，就像這樣：

$("#column_2").effect(selectedEffect, options, 500, function(){ 
    $("#column_3").effect(selectedEffect, options, 500, function(){ 
     $("#column_4").effect(selectedEffect, options, 500, callback); 
    }); 
});

發生了什麼是inlin e回調函數在當前效果結束之前不會開始運行。

工作實例：

document.getElementById("column_1").innerHTML = ""; 
 
document.getElementById("column_1").innerHTML = "<span style='color:#FFFFFF'> Account Group </span>"; 
 

 
// for (var prop in cc) 
 
for (prop = 0; prop < 10; prop++) { 
 
    // document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + cc[prop] + ', ' + amt[prop] + '</button></div>'; 
 
    document.getElementById('column_1').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop + ' class="list-group-item" onclick="myFunction2(this.id)">' + prop + '</button></div>'; 
 
} 
 

 
function myFunction2(e) { 
 
    test = e; 
 
    console.log(e); 
 
    document.getElementById("column_2").innerHTML = ""; 
 
    document.getElementById("column_2").innerHTML = "<span style='color:#FFFFFF'> GL Accounts </span>"; 
 
    document.getElementById("column_3").innerHTML = ""; 
 
    document.getElementById("column_3").innerHTML = "<span style='color:#FFFFFF'> GL Balance </span>"; 
 
    document.getElementById("column_4").innerHTML = ""; 
 
    document.getElementById("column_4").innerHTML = "<span style='color:#FFFFFF'> GL Name </span>"; 
 
    document.getElementById("column_5").innerHTML = ""; 
 

 
    // for (var prop3 in gl) 
 
    for (prop3 = 0; prop3 < 20; prop3++) { 
 
    document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 
    document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 
    document.getElementById('column_4').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + e + ' class="list-group-item" onclick="myFunction4(this.id)">' + e + '</button></div>'; 
 

 
    // document.getElementById('column_2').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">' + gl[prop3] + '</button></div>'; 
 
    // document.getElementById('column_3').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop3 + ' class="list-group-item" onclick="myFunction4(this.id)">' + po[prop3] + '</button></div>'; 
 
    } 
 
} 
 

 
function myFunction4(e) { 
 
    test = e; 
 
    console.log(e); 
 
    document.getElementById("column_5").innerHTML = ""; 
 
    document.getElementById("column_5").innerHTML = "<span style='color:#FFFFFF'> Breakdown </span>"; 
 
    // for (var prop5 in cc) 
 
    for (prop5 = 0; prop5 < 5; prop5++) { 
 
    document.getElementById('column_5').innerHTML += '<div class="col-md-auto"> <button type="button" id=' + prop5 + ' class="list-group-item" onclick="myFunction5(this.id)">' + "Breakdown " + prop5 + '</button></div>'; 
 
    } 
 
} 
 

 
function myFunction5(e) { 
 
    test = e; 
 
    console.log(e); 
 
    window.open("", "", "width=500,height=500"); 
 
} 
 

 
$(function() { 
 
    // run the currently selected effect 
 
    function runEffect1() { 
 
    var selectedEffect = "slide"; 
 
    var options = {}; 
 
    
 
    /* Hide the columns so that they can slide into display*/ 
 
    $("#column_2").hide(); 
 
    $("#column_3").hide(); 
 
    $("#column_4").hide(); 
 
    
 
    // Run the effect 
 
    $("#column_2").effect(selectedEffect, options, 500, function(){ 
 
     $("#column_3").effect(selectedEffect, options, 500, function(){ 
 
      $("#column_4").effect(selectedEffect, options, 500, callback); 
 
     }); 
 
    }); 
 
    }; 
 

 
    function runEffect2() { 
 
    var selectedEffect = "slide"; 
 
    var options = {}; 
 
    $("#column_5").effect(selectedEffect, options, 500, callback); 
 
    } 
 

 
    // Callback function to bring a hidden box back 
 

 
    function callback() { 
 
    setTimeout(function() { 
 
     $("#effect").removeAttr("style").hide().fadeIn(); 
 
    }, 100); 
 
    }; 
 

 
    // Set effect from select menu value 
 
    $("#column_1").on("click", function() { 
 
    runEffect1(); 
 
    return false; 
 
    }); 
 

 
    $("#column_2").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 

 
    $("#column_3").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 

 
    $("#column_4").on("click", function() { 
 
    runEffect2(); 
 
    return false; 
 
    }); 
 

 
});

@import url(https://fonts.googleapis.com/css?family=Roboto:300); 
 
.ui-effects-transfer { 
 
    border: 2px dotted gray; 
 
} 
 

 
.login-page { 
 
    width: 360px; 
 
    padding: 8% 0 0; 
 
    margin: auto; 
 
} 
 

 
.form { 
 
    position: relative; 
 
    z-index: 1; 
 
    background: #FFFFFF; 
 
    max-width: 360px; 
 
    margin: 0 auto 100px; 
 
    padding: 45px; 
 
    text-align: center; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
 
} 
 

 
.form input { 
 
    font-family: "Roboto", sans-serif; 
 
    outline: 0; 
 
    background: #f2f2f2; 
 
    width: 100%; 
 
    border: 0; 
 
    margin: 0 0 15px; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
    font-size: 14px; 
 
} 
 

 
.form button { 
 
    font-family: "Roboto", sans-serif; 
 
    text-transform: uppercase; 
 
    outline: 0; 
 
    background: #4778b7; 
 
    width: 100%; 
 
    border: 0; 
 
    padding: 15px; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    -webkit-transition: all 0.3 ease; 
 
    transition: all 0.3 ease; 
 
    cursor: pointer; 
 
} 
 

 
.form button:hover, 
 
.form button:active, 
 
.form button:focus { 
 
    background: #4778b7; 
 
} 
 

 
.form .message { 
 
    margin: 15px 0 0; 
 
    color: #b3b3b3; 
 
    font-size: 12px; 
 
} 
 

 
.form .message a { 
 
    color: #4CAF50; 
 
    text-decoration: none; 
 
} 
 

 
.form .register-form { 
 
    display: none; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    z-index: 1; 
 
    max-width: 300px; 
 
    margin: 0 auto; 
 
} 
 

 
.container:before, 
 
.container:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.container .info { 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 

 
.container .info h1 { 
 
    margin: 0 0 15px; 
 
    padding: 0; 
 
    font-size: 36px; 
 
    font-weight: 300; 
 
    color: #1a1a1a; 
 
} 
 

 
.container .info span { 
 
    color: #4d4d4d; 
 
    font-size: 12px; 
 
} 
 

 
.container .info span a { 
 
    color: #000000; 
 
    text-decoration: none; 
 
} 
 

 
.container .info span .fa { 
 
    color: #EF3B3A; 
 
} 
 

 
body { 
 
    background: #4778b7; 
 
    /* fallback for old browsers */ 
 
    background: -webkit-linear-gradient(right, #4778b7, #4778b7); 
 
    background: -moz-linear-gradient(right, #4778b7, #4778b7); 
 
    background: -o-linear-gradient(right, #4778b7, #4778b7); 
 
    background: linear-gradient(to left, #4778b7, #4778b7); 
 
    font-family: "Roboto", sans-serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.row.no-gutter { 
 
    margin-left: 0; 
 
    margin-right: 0; 
 
} 
 

 
.row.no-gutter [class*='col-']:not(:first-child), 
 
.row.no-gutter [class*='col-']:not(:last-child) { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="grid" class="container-fluid"> 
 
    <div class="row no-gutter"> 
 
    <div class="col-md-2"> 
 
     <div id="column_1"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_2"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_3"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2 "> 
 
     <div id="column_4"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <div id="column_5"> 
 
     <div class="list-group"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

備選：

如果嵌套他們太深來管理，你可以把每個進入這樣一個單獨的函數：

function showCol2(){ $("#column_2").effect(selectedEffect, options, 500, showCol3); } 
function showCol3(){ $("#column_3").effect(selectedEffect, options, 500, showCol4); } 
function showCol4(){ $("#column_4").effect(selectedEffect, options, 500, callback); }

來源

2017-10-18 13:06:13 FluffyKitten

這正是我想要的。乾杯! – user3163920

你可以做這樣的事情：

function runEffect1() { 
       var selectedEffect = "slide"; 
       var options = {}; 

       // Run the effect 
       setTimeout(function() { 
        $("#column_2").effect(selectedEffect); 
       }, 100); 
       setTimeout(function() { 

        $("#column_3").effect(selectedEffect); 
       }, 300); 
       setTimeout(function() { 
        $("#column_4").effect(selectedEffect); 
       }, 500); 

      };

來源

2017-10-18 13:02:28

我有問題改變你的代碼，但jQuery有此示例代碼：

$("#clickme").click(function() { 
    $("#book").animate({ 
    opacity: 0.25, 
    left: "+=50", 
    height: "toggle" 
    }, 5000, function() { 
    // Animation complete. 
    }); 
});

窩在動畫完整的部分你的電話，它應該工作。你也可以使用jQuery promise（）。

var p1 = $('.items').hide(2000).promise(); 
var p2 = $('.items').hide(2000).promise(); 
$.when(p1).then(function() { 
    $.when(p2).then(function() { 
    // more animations ... 
    }); 
});

來源

2017-10-18 13:10:31

JavaScript一個接一個的動畫

回答

相關問題