jQuery设置一个粘贴者跳跃的动画(先设置顶部动画,然后设置底部动画)
jQuery Animating a stickman to jump (animate top, then bottom)
我正在制作这种游戏。这只是一个在屏幕上"行走"的粘人。如果你按"向上"键,我想加上跳跃。
这是我的代码(没有跳转):
$(document).ready(function () {
var sitting = $('#sitting'),
image = $('#img');
sitting.hide();
$(document).keydown(function (e) {
var keyCode = e.keyCode || e.which,
arrow = {
left: 37,
up: 38,
right: 39,
down: 40,
space: 32
};
switch (keyCode) {
case arrow.left:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '-=60px'
}, 300, "linear");
}
break;
case arrow.up:
break;
case arrow.right:
if (!sitting.is(':visible')) {
image.add(sitting).stop(true).animate({
left: '+=60px'
}, 300, "linear");
}
break;
case arrow.down:
break;
case arrow.space:
image.fadeToggle(-100, function () {
sitting.fadeToggle(-100);
});
break;
}
});
$('#sit').click(function () {});
});
出于常识,我使用了排队的动画并这样做了(我只减少到大小写箭头.up,因为这是唯一相关的部分):
case arrow.up:
if (!sitting.is(':visible')) {
image.animate({
top: '+=10px'
}, 200, "linear");
image.animate({
bottom: '+=10px'
}, 200, "linear");
}
break;
出于某种原因,它不起作用。不管怎样。这是jsBin
现场演示
var sitting = $('#sitting'),
image = $('#img'), // COMMA HERE
jumping = false ; // ADD THIS
和修改:
case arrow.up:
if (!sitting.is(':visible') && jumping===false) {
jumping = true;
image.stop().animate({
top: '-=150px'
}, 200, "linear", function(){
$(this).animate({top: '+=150'}, 300,'linear', function(){
jumping = false;
});
});
}
break;
相关文章:
- 如何设置html元素填充的动画
- 使用数据上的角度更改设置集合的第一个元素的动画
- 设置动画时,SVG/Raphael大圆圈会变形
- 在Jquery倒计时计时器上设置每个数字的动画
- 使用javascript可以设置css动画的当前百分比
- jQuery animate()函数没有't设置动画
- 如何设置自定义垂直滑块Jquery的动画
- 如何平滑地设置twitter引导程序进度条的动画
- 在EaselJS中设置精灵表动画时出现问题
- 对象获胜'如果qml中的其他地方定义了数字动画属性,则t设置动画
- 如何将高度动画设置为自动
- 替换后将动画设置为高度0
- 为什么动画设置加载在TweenMax中的两个单独的对象文字中
- 取消请求动画设置时间后的帧
- 在动画设置超时后执行函数
- 为什么Raphael.js的动画设置到不正确的坐标
- 如果动画设置为false,则Chart.js不会在Android Webview上显示
- 动画设置为浅黄色,然后返回白色?jQUery
- 三个js拼贴画动画设置时间
- 如何使用谷歌图表动画设置数值的动画?特别是Gauage