jQuery 单击两次后动画不起作用

Question

我正在尝试通过 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>

这是我的代码link：https://jsfiddle.net/djmayank/mcutmbcy/1/

Answer 1

问题是您的属性有冲突。如果你想移动一个元素，只使用 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>

Answer 2

必须有一个 $(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>

Answer 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>

Answer 4

Updated fiddle.

您可以 "increase/decrease" 使用 += 和 -= 仅 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>

Answer 5

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 更改左侧和顶部属性。这工作正常。您可以使用 css 更改框的初始位置，然后在 Jquery.

中相应地移动它

jQuery 单击两次后动画不起作用

jQuery animation don't work after two clicks

html

javascript

css

jquery

jquery-animate