來自多個來源的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]; 
});