複数のソースからのjQueryアニメーション - 複数のオブジェクトに影響を及ぼす

Question

私は、ポンプをシミュレートするために、期待どおりの成長と収縮を探しています。

プロセスは、次のとおりです。ポンプ1

に ポンプポンプに1つのダンプポンプに2つの ポンプ2つのダンプ3つの ポンプ3つのダンプは、現在、私は予想通り、かなりの作業/オフボタンの上に持っています。残念ながらデモでは、同時に複数のボタンを使用したいと思います。

したがって、ポンプ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]; 
});