我正在尝试通过jQuery处理动画,我遇到了一个问题,即div框只能工作2次。任何形式的帮助表示赞赏。 这是我的代码:
$(document).ready(function() {
$("#one").click(function() {
$("div").animate({
top: '250px'
});
});
$("#sec").click(function() {
$("div").animate({
bottom: '250px'
});
});
$("#thi").click(function() {
$("div").animate({
right: '250px'
});
});
$("#for").click(function() {
$("div").animate({
left: '250px'
});
});
});

.box {
background: grey;
height: 20px;
width: 20px;
position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>
<br><br>
<div class="box">
</div>
&#13;
答案 0 :(得分:4)
问题是你有相互冲突的属性。如果要移动元素,请仅使用top
和left
坐标。使用bottom
和right
实际上告诉浏览器您要扩展元素。
此外,.ready()
函数在jQuery中已被弃用多年,因为$(function() { ... })
执行相同的操作。见下文。
$(function(){
$("#one").click(function(){
$("div").animate({top: '0px'});
});
$("#sec").click(function(){
$("div").animate({top: '250px'});
});
$("#thi").click(function(){
$("div").animate({left: '250px'});
});
$("#for").click(function(){
$("div").animate({left: '0px'});
});
});
&#13;
.box {
background:grey;
height:20px;
width:20px;
position:absolute;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>
<br><br>
<div class="box"></div>
&#13;
答案 1 :(得分:4)
<强> Updated fiddle 强>
你可以&#34;增加/减少&#34;只使用top/right
和+=
的{{1}}抵消:
-=
注意:您只能使用一个$(function(){
$("#one").click(function(){
$("div").animate({top: '+=25px'});
});
$("#sec").click(function(){
$("div").animate({top: '-=25px'});
});
$("#thi").click(function(){
$("div").animate({right: '+=25px'});
});
$("#for").click(function(){
$("div").animate({right: '-=25px'});
});
});
功能。
希望这有帮助。
ready
&#13;
$(document).ready(function(){
$("#one").click(function(){
$("div").animate({top: '+=100px'});
});
$("#sec").click(function(){
$("div").animate({top: '-=100px'});
});
$("#thi").click(function(){
$("div").animate({right: '+=100px'});
});
$("#for").click(function(){
$("div").animate({right: '-=100px'});
});
});
&#13;
.box{
background:grey;
height:20px;
width:20px;
position:absolute;
}
&#13;
答案 2 :(得分:2)
您需要使用top:0
进行热门点击,top:250px
进行底部点击。同样,您需要使用left:0
表示左侧,left:250px
表示右键单击。
$(document).ready(function(){
$("#one").click(function(){
$("div").animate({top: '250px'});
});
$("#sec").click(function(){
$("div").animate({top: '0'});
});
$("#thi").click(function(){
$("div").animate({left: '0'});
});
$("#for").click(function(){
$("div").animate({left: '250px'});
});
});
&#13;
.box{
background:grey;
height:20px;
width:20px;
position:absolute;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>
<br><br>
<div class="box">
</div>
&#13;
答案 3 :(得分:1)
必须有一个$(文件).ready(function(){});并在里面写下你需要的所有代码。
$(document).ready(function(){
$("#one").click(function(){
$("div").animate({top: '+=250px'});
});
$("#two").click(function(){
$("div").animate({top: '-=250px'});
});
$("#three").click(function(){
$("div").animate({right: '+=250px'});
});
$("#four").click(function(){
$("div").animate({left: '+=250px'});
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
答案 4 :(得分:1)
使用右侧和底部属性不正确。见下文:
$(function(){
$("#one").click(function(){
$("div").animate({top: '250px'});
});
$("#sec").click(function(){
$("div").animate({top: '0px'});
});
$("#thi").click(function(){
$("div").animate({left: '250px'});
});
$("#for").click(function(){
$("div").animate({left: '0px'});
});
});
CSS:
.box{
background-color:grey;
height:20px;
width:20px;
position:absolute;
top: 0px;
left: 0px;
}
请注意,您只需使用Jquery更改left和top属性。 这是正确的。您可以使用css更改框的初始位置,然后在Jquery中相应地移动它。