Question

＆＃13;

$(function(){
	
	function boxtoRight(){
		$("#box").animate({marginLeft: 600},3000,'linear',boxtoLeft);
	}
	function boxtoLeft(){
		$("#box").animate({marginLeft: 0},3000,'linear',boxtoRight);
	}
	boxtoRight();


	$(document).keydown(function(e){
		if(e.keyCode == 32){
			$("#box").css("background","green");
			$("#box").css("bottom","200px").css("transition","0.2s");
		}
	});
	$(document).keyup(function(e){ 
		if(e.keyCode == 32){
			$("#box").css("background","red");
			$("#box").css("bottom","130px").css("transition","0.2s");
		}
	});

});

＆＃13;

#container{
	background: #ccc;
	width: 600px;
	height: 200px;
}
#box{
	width: 90px;
	height: 90px;
	background: red;
	position: absolute;
	margin-top: 110px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
		<div id="box"></div>
</div>

＆＃13;

问题是当我按下空格键时我试图让盒子跳起来。现在，如果按空格键，框会跳转，但动画不顺畅。

另外，如何通过动画，滚动和转到文档右侧将框移动到窗口的中心？

Answer 1

这里有一些事情。在CSS转换属性中，您需要指定转换适用的属性。因此，我已将您的CSS更新为包含transition: bottom 0.2。我还提供了#container position: relative，因此bottom的{{1}}属性相对于#box的底部。

#container

现在，在您的Javascript中，您不再需要更改#container{ background: #ccc; width: 600px; height: 200px; position: relative; //added } #box{ width: 90px; height: 90px; background: red; position: absolute; bottom: 0px; //added transition: bottom 0.2s; //added }属性。此外，我没有多次调用transition，而是更新了一次.css()来电更改了多个属性。最后，我更改了.css()的值，因为它现在相对于bottom的底部。

#container

看看这个工作小提琴：https://jsfiddle.net/s3pfrhn8/2/

CSS底部过渡不顺畅

1 个答案: