JavaScript eine Animation nach der anderen

Ich habe den folgenden Code. Es gibt fünf Spalten mit Schaltflächen. Wenn auf eine der Schaltflächen in der ersten Spalte geklickt wird, wird die zweite, dritte und vierte Spalte ausgefahren. Wenn auf die zweite, dritte oder vierte Spalte geklickt wird, wird die fünfte Spalte ausgefahren.JavaScript eine Animation nach der anderen

Wenn auf die erste Spalte geklickt wird, möchte ich, dass die zweite Spalte zuerst herausragt, gefolgt von der dritten und dann der vierten Spalte. Im Moment rutschen sie zur gleichen Zeit heraus. Ich habe versucht, Verzögerungen hinzuzufügen, aber sie machen keinen Unterschied.

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>

Quelle

2017-10-18 user3163920

Sie entweder die Callback-Funktionen von Effekt nutzen, um die nächste Animation oder verwenden Warteschlange auszulösen alle Animationen in der gleichen Warteschlange einzureihen und fügen Verzögerungen – LordNeo

Mögliche Duplikat [Wie kann ich animieren mehrere Elemente nacheinander mit jQuery? ] (https://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery) – LordNeo

Nicht sicher, ob du meine Antwort gesehen hast, aber das Snippet funktioniert jetzt vollständig! (Sie müssen es im erweiterten Modus anzeigen, um es zu sehen) – FluffyKitten

Anstatt zu versuchen, Timeouts einzurichten, um die Geschwindigkeit anzupassen, können Sie ketten sie Rückrufe verwenden, wie folgt aus:

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

Was passiert ist, dass die Inlin Die Callback-Funktion wird nicht gestartet, bis der aktuelle Effekt beendet ist.

Arbeitsbeispiel:

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>

Alternative:

Wenn sie nisten zu tief wird zu verwalten, können Sie jeweils in eine separate Funktion so:

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); }

Quelle

2017-10-18 13:06:13 FluffyKitten

Dies ist genau das, was ich wollte. Prost! – user3163920

Sie etwas tun können:

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); 

      };

Quelle

2017-10-18 13:02:28

Ich habe Ihren Code Probleme ändern sich, aber jQuery hat diesen Beispielcode:

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

Nest Ihre Anrufe in Animation kompletten Abschnitt und es sollte funktionieren. Sie können auch jQuery versprechen() verwenden.

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

Quelle

2017-10-18 13:10:31

JavaScript eine Animation nach der anderen

Antwort

Verwandte Themen