Question

我正在尝试通过jQuery处理动画，我遇到了一个问题，即div框只能工作2次。任何形式的帮助表示赞赏。这是我的代码：

＆＃13;

$(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'
    });
  });
});

＆＃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;

以下是我的代码链接：https://jsfiddle.net/djmayank/mcutmbcy/1/

Answer 1

问题是你有相互冲突的属性。如果要移动元素，请仅使用top和left坐标。使用bottom和right实际上告诉浏览器您要扩展元素。

此外，.ready()函数在jQuery中已被弃用多年，因为$(function() { ... })执行相同的操作。见下文。

＆＃13;

$(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;

Answer 2

<强> 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'}); }); });功能。

希望这有帮助。

＆＃13;

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;

Answer 3

您需要使用top:0进行热门点击，top:250px进行底部点击。同样，您需要使用left:0表示左侧，left:250px表示右键单击。

＆＃13;

    $(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;

Answer 4

必须有一个$（文件）.ready（function（）{}）;并在里面写下你需要的所有代码。

＆＃13;

$(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;

Answer 5

使用右侧和底部属性不正确。见下文：

$(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中相应地移动它。

两次点击后，jQuery动画无法工作

5 个答案: