我正在尝试通过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>
解决方法
Updated fiddle.
您可以使用=和 – =“增加/减少”上/下偏移：
$(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'});
});
});
注意：您只能使用一个就绪功能.
希望这可以帮助.
$(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>
