javascript - 来自多个来源的 jQuery 动画 - 影响多个对象

Question

我正在寻找模拟泵，按预期增长和收缩。

过程是:泵 1 倾倒到泵 2泵 2 倾倒到泵 3泵 3 转储到泵 1

目前，我的开/关按钮几乎可以按预期工作。不幸的是，对于演示 - 我想同时打开多个按钮。

因此，如果泵 1 和泵 3 同时开启，我希望泵 2 保持不变。不幸的是，我现在使用 jQuery 动画的方式并没有实时模仿它。

这是一个演示:http://jsfiddle.net/tJugd/3939/

理想情况下，我想要的是每秒增长/缩小 X 像素并绑定(bind)到特定 div 或类似内容的东西。我对想法持开放态度。

示例 jQuery:

const secs = 30000;
const maxH = '250';
const minH = '0';

$('#btn-on-one').click(function(){
    $('#air-pump-one').animate({height:maxH}, secs);
    $('#water-pump-one').animate({height:minH}, secs);
    $('#air-pump-two').animate({height:minH}, secs);
    $('#water-pump-two').animate({height:maxH}, secs);
});

$('#btn-off-one').click(function(){
    $('#air-pump-one').stop().animate();
    $('#water-pump-one').stop().animate();
    $('#air-pump-two').stop().animate();
    $('#water-pump-two').stop().animate();
});

Answer 1

我不清楚你问的是什么，但我根据我的理解重写了一点。您可以看看这是否适合您。

http://jsfiddle.net/d21oq86d/6/

如果您更改容量，只需确保 .pump-animation-box 高度 css 具有正确的高度以反射(reflect)新容量。

CSS:

.pump-animation-parent {
  display: inline-flex;
}

.pump-animation-box {
  border: 2px solid #333;
  height: 150px;
  width: 40px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.pump_contents {
  background-color: #04ACFF;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 40px;
}

HTML:

  <div id="pump-animation" class="pump-animation-parent">
    <div id="pump-one-animation" class="pump-animation-box">
      <div class="pump_contents" data-id="1"></div>
    </div>
    <div id="pump-two-animation" class="pump-animation-box">
      <div class="pump_contents" data-id="2"></div>
    </div>
    <div id="pump-three-animation" class="pump-animation-box">
      <div class="pump_contents" data-id="3"></div>
    </div>
  </div>

  <div id="button-parent">
    <div>
      <button class="btn-default pump_button" data-id="1">Toggle Pump 1</button>
    </div>
    <div>
      <button class="btn-default pump_button" data-id="2">Toggle Pump 2</button>
    </div>
    <div>
      <button class="btn-default pump_button" data-id="3">Toggle Pump 3</button>
     </div>
  </div>

JS:

var pumps = {
    'status': {
    1: false,
    2: false,
    3: false
  },
  'contents': {
    1: 50,
    2: 50,
    3: 50
  },
  'capacity': {
    1: 150,
    2: 150,
    3: 150
  }
};

$(function(){
    init();
});

function init() {
    setInterval(function(){
    pumpCycle();
    updatePumps();
  }, 200);
}

function pumpCycle() {
    for(var i = 1; i <= 3; i++) {
    var target = i == 3 ? 1 : i + 1;
    if(pumps.status[i]) {
        if(pumps.contents[target] < pumps.capacity[i] && pumps.contents[i] > 0) {
        pumps.contents[target]++;
        pumps.contents[i]--;
      }
    }
  }
}

function updatePumps() {
    for(var i = 1; i <= 3; i++) {
    $('.pump_contents[data-id='+i+']').css('height', pumps.contents[i]+'px');
  }
}

function printPumps() {
    console.log(pumps);
}

$('.pump_button').click(function(){
    var pump_id = $(this).attr('data-id');
  pumps.status[pump_id] = !pumps.status[pump_id];
});