单击两次后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】:

问题是您有冲突的属性。如果你想移动一个元素,只使用topleft 坐标。使用bottomright 本质上是告诉浏览器你想要拉伸元素。

此外,.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');
    );
);
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】:

你可能想编辑你的答案,你的代码有一个js错误$未定义。 @NathanielFlick 只是因为我没有引用 jQuery 库,谢谢你的评论。

以上是关于单击两次后jQuery动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery .animate() 在我第二次触发它时不起作用

Jquery 和 CSS 动画在 ANDROID Webview 应用程序中不起作用

动画功能不起作用

JQuery背景颜色动画不起作用

JQuery背景颜色动画不起作用

jquery动画滚动不起作用