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

Question

我在寻找模拟泵，如预期的那样增长和缩小。

的过程是： 泵1点转储到泵2 泵2点转储到泵3 泵3点转储到泵1

目前，我有开/关按钮，工作非常正常。不幸的是，对于演示 - 我想同时有多个按钮。

因此，如果泵1和泵3同时打开，我预计泵2保持不变。不幸的是，我现在正在使用jQuery动画的方式并不是实时模拟这种动画。

这里有一个演示：http://jsfiddle.net/tJugd/3939/

理想情况下，我会想的东西，长/每秒缩小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动画盒高度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]; 
});