单击两次后jQuery动画不起作用
Posted
技术标签:
【中文标题】单击两次后jQuery动画不起作用【英文标题】:jQuery animation don't work after two clicks 【发布时间】:2018-01-14 01:25:48 【问题描述】:我正在尝试通过 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>
这是我的代码链接:https://jsfiddle.net/djmayank/mcutmbcy/1/
【问题讨论】:
一个准备好的函数就足够了:) 我已经这样做了,但问题仍然存在。 这里是更新的 jsfiddle jsfiddle.net/mcutmbcy/10 jsfiddle.net/mcutmbcy/16 【参考方案1】:Updated fiddle.
您可以使用 +=
和 -=
仅“增加/减少”top/right
偏移量:
$(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
函数。
希望这会有所帮助。
$(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');
);
);
.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>
【讨论】:
ready()
早就被弃用了,直接用$(function() ... );
【参考方案2】:
问题是您有冲突的属性。如果你想移动一个元素,只使用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');
);
);
.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>
【讨论】:
【参考方案3】:您需要使用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');
);
);
.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>
【讨论】:
【参考方案4】:使用属性 right 和 bottom 不正确。见下文:
$(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 中相应地移动它。
【讨论】:
【参考方案5】:必须有一个 $(document).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');
);
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
【讨论】:
你可能想编辑你的答案,你的代码有一个js错误$未定义。 @NathanielFlick 只是因为我没有引用 jQuery 库,谢谢你的评论。以上是关于单击两次后jQuery动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Jquery .animate() 在我第二次触发它时不起作用