我正在寻找模拟泵,按预期增长和收缩。
过程是: 泵 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();
});
最佳答案
我不清楚你问的是什么,但我根据我的理解重写了一点。您可以看看这是否适合您。
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];
});
关于javascript - 来自多个来源的 jQuery 动画 - 影响多个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36819577/