Haben Knöpfe bewegen div verschiedene Mengen

Question

Also habe ich drei Tasten, jeder löst ein Ereignis aus. Gleichzeitig mit dem Auslösen eines Ereignisses möchte ich, dass es neben der angeklickten Schaltfläche ein Div verschiebt. Problem ist, dass ich möchte, dass ich nicht neben der Schaltfläche teleportiere, sondern mich in einer Animation dorthin bewege. Ich habe meinen Code wie unten gezeigt organisiert, aber es passiert nur einmal und wenn ich dann versuche auf einen anderen Button zu klicken, bleibt das Div dort.

function func1() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    var doneTheStuff; 
 
    var id = setInterval(frame, 10); 
 
    function frame() { 
 
    if (!doneTheStuff) { 
 
    doneTheStuff = true; 
 
    } else if (pos == 6) { 
 
      clearInterval(id); 
 
     } else if (pos > 6) { 
 
      pos++; 
 
      elem.style.top = pos - 'px'; 
 
     } else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
    } 
 
    
 
    function func2() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    var doneTheStuff; 
 
    var id2 = setInterval(frame2, 10); 
 
    function frame2() { 
 
     if (!doneTheStuff) { 
 
    doneTheStuff = true; 
 
    } else if (pos == 60) { 
 
      clearInterval(id2); 
 
     } else if (pos > 60) { 
 
      pos++; 
 
      elem.style.top = pos - 'px'; 
 
     } else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
    } 
 
     function func3() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    var doneTheStuff; 
 
    var id3 = setInterval(frame3, 10); 
 
    function frame3() { 
 
      if (!doneTheStuff) { 
 
    doneTheStuff = true; 
 
    } else if (pos == 120) { 
 
      clearInterval(id3); 
 
     } else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
    }

#button-1 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-2 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 60px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-3 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 120px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#thebarofpower{ 
 
    position: absolute; 
 
    background-color: #42bff4; 
 
    width: 2px; 
 
    height: 50px; 
 
    left: 70px; 
 
    top: 0px; 
 
    border-radius: 30px; 
 
    box-shadow: 0px 0px 10px 1px #41d0f4; 
 
}

<button id="button-1" onclick="func1()"></button> 
 
<button id="button-2" onclick="func2()"></button> 
 
<button id="button-3" onclick="func3()"></button> 
 
<div id="thebarofpower"></div>

Answer 1

Das Hauptproblem ist, dass, nachdem Sie die style.top auf eine Zahl und px, müssen Sie für das Konto, wenn Sie es überprüfen das nächste Mal. Es gab auch ein paar Situationen, in denen Sie sich in die falsche Richtung bewegten.

function func1() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2) 
 
    var doneTheStuff; 
 
    var id = setInterval(frame, 10); 
 

 
    function frame() { 
 
    if (!doneTheStuff) { 
 
     doneTheStuff = true; 
 
    } else if (pos == 6) { 
 
     clearInterval(id); 
 
    } else if (pos > 6) { 
 
     pos--; 
 
     elem.style.top = pos + 'px'; 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
function func2() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2) 
 
    var doneTheStuff; 
 
    var id2 = setInterval(frame2, 10); 
 

 
    function frame2() { 
 
    if (!doneTheStuff) { 
 
     doneTheStuff = true; 
 
    } else if (pos == 60) { 
 
     clearInterval(id2); 
 
    } else if (pos > 60) { 
 
     pos--; 
 
     elem.style.top = pos + 'px'; 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
function func3() { 
 
    var elem = document.getElementById("thebarofpower"); 
 
    var pos = elem.style.top; 
 
    if (pos[pos.length-2] == "p") pos = pos.slice(0, pos.length -2) 
 
    var doneTheStuff; 
 
    var id3 = setInterval(frame3, 10); 
 

 
    function frame3() { 
 
    if (!doneTheStuff) { 
 
     doneTheStuff = true; 
 
    } else if (pos == 120) { 
 
     clearInterval(id3); 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
    } 
 
    } 
 
}

#button-1 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#button-2 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 60px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#button-3 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 120px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#thebarofpower { 
 
    position: absolute; 
 
    background-color: #42bff4; 
 
    width: 2px; 
 
    height: 50px; 
 
    left: 70px; 
 
    top: 0px; 
 
    border-radius: 30px; 
 
    box-shadow: 0px 0px 10px 1px #41d0f4; 
 
}

<button id="button-1" onclick="func1()"></button> 
 
<button id="button-2" onclick="func2()"></button> 
 
<button id="button-3" onclick="func3()"></button> 
 
<div id="thebarofpower"></div>

Answer 2

https://jsfiddle.net/t8jztc7x/1/

$('.btn').each(function(){ 
 
var btnOffset = $(this).offset().top; 
 
$(this).click(function(){ 
 
$('#thebarofpower').css('top',btnOffset) 
 
}); 
 
});

#button-1 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-2 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 60px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-3 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 120px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#thebarofpower{ 
 
    position: absolute; 
 
    background-color: #42bff4; 
 
    width: 2px; 
 
    height: 50px; 
 
    left: 70px; 
 
    top: 0px; 
 
    border-radius: 30px; 
 
    box-shadow: 0px 0px 10px 1px #41d0f4; 
 
transition:top 0.4s 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<button id="button-1" class="btn"></button> 
 
<button id="button-2" class="btn"></button> 
 
<button id="button-3" class="btn"></button> 
 
<div id="thebarofpower"></div>

Answer 3

Ihre Funktionen wurden die Verarbeitung einfach nicht die Pixeländerung genau richtig. Ich machte ein paar kleine Änderungen (im Folgenden zusammengefasst) und hier eine Lösung, die wie beabsichtigt funktioniert:

var elem = document.getElementById("thebarofpower"); 
 

 
function func1() { 
 
    var pos = elem.style.top.slice(0,-2); 
 
    var doneTheStuff; 
 
    var id = setInterval(frame, 10); 
 
    function frame() { 
 
     if (!doneTheStuff) { 
 
      doneTheStuff = true; 
 
     } 
 
     else if (pos == 6) { 
 
      clearInterval(id); 
 
     } 
 
     else if (pos > 6) { 
 
      pos--; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
     else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
} 
 
    
 
function func2() { 
 
    var pos = elem.style.top.slice(0,-2); 
 
    var doneTheStuff; 
 
    var id2 = setInterval(frame2, 10); 
 
    function frame2() { 
 
     if (!doneTheStuff) { 
 
      doneTheStuff = true; 
 
     } 
 
     else if (pos == 60) { 
 
      clearInterval(id2); 
 
     } 
 
     else if (pos > 60) { 
 
      pos--; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
     else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
} 
 

 
function func3() { 
 
    var pos = elem.style.top.slice(0,-2); 
 
    var doneTheStuff; 
 
    var id3 = setInterval(frame3, 10); 
 
    function frame3() { 
 
     if (!doneTheStuff) { 
 
      doneTheStuff = true; 
 
     } 
 
     else if (pos == 120) { 
 
      clearInterval(id3); 
 
     } 
 
     else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
     } 
 
    } 
 
}

#button-1 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-2 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 60px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 
#button-3 { 
 
    position: absolute; 
 
    background: transparent; 
 
    left: 0px; 
 
    top: 120px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border: ; 
 
    box-shadow: 6px 6px 6px #888888; 
 
} 
 

 
#thebarofpower{ 
 
    position: absolute; 
 
    background-color: #42bff4; 
 
    width: 2px; 
 
    height: 50px; 
 
    left: 70px; 
 
    top: 0px; 
 
    border-radius: 30px; 
 
    box-shadow: 0px 0px 10px 1px #41d0f4; 
 
}

<button id="button-1" onclick="func1()"></button> 
 
<button id="button-2" onclick="func2()"></button> 
 
<button id="button-3" onclick="func3()"></button> 
 
<div id="thebarofpower"></div>

Änderungen:

• entfernt "px" von der Position vor Verarbeitung
• Die element Variablendeklaration wurde außerhalb der Funktionen verschoben, so dass Sie sie nur einmal deklarieren müssen, anstatt dreimal
• Einige der Befehle pos++ bewegten den Balken in die falsche Richtung. veränderte sie pos--