Question

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

过程是：泵1排入泵2 泵2排入泵3 泵3排入泵1

目前我的开/关按钮与预期的工作非常相似。不幸的是，对于演示 - 我想同时打开多个按钮。

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

理想情况下，我想要的是每秒增长/缩小X像素并且绑定到特定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 height css具有正确的高度以反映新容量。

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

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

1 个答案: