按钮移动div不同的数量

Question

所以我有三个按钮，每个按钮触发一个事件。在触发事件的同时，我希望它在单击的按钮旁移动div。问题是我希望它不是在按钮旁边传送，而是在动画中移动。我的代码组织如下所示，但它只发生一次，然后当我尝试点击另一个按钮时，div保持在那里。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

主要问题是，在您将style.top更改为数字加px后，您必须在下次检查时对此进行说明。还有一些情况是你朝着错误的方向前进。

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/

＆＃13;

＆＃13;

ChatterBeforeNewDiscussion.php

＆＃13;

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

＆＃13;

#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
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的功能只是没有正确处理像素更改。我做了一些小改动（总结如下），这是一个按预期工作的解决方案：

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>

的变化：

• 从处理前的位置删除“px”
• 将element变量声明移到函数外部，因此您只需声明一次，而不是3次
• 某些pos++命令正在向错误的方向移动条形图;将其更改为pos--