Question

我目前正在为未来的工作机会开发专业的作品集。对于我正在练习的所有概念，我都是新手，并且在使用jQuery的.animate（）方法时遇到了问题。使用jQuery的.css（）方法似乎没有问题，但是一旦我尝试实现.animate（），一切就不会发生。

由于我将Bootstrap和Semantic以及自己的自定义CSS和javascript文件一起使用，因此我尝试重新排列CDN和Script标签，但是没有任何改变。

当前订单为：
头部：
Bootstrap CSS CDN
Bootstrap js CDN
语义CSS CDN
相对自定义CSS

在结束正文标签之前：
jQuery js CDN
Popper js CDN
语义js CDN
相对自定义js（相关代码所在的位置）

<button class="ui green basic button" id="click">Click</button>
<div id="trans">
    <h4>Hello World</h4>
</div>

$('#click').click(function(){
    $('#trans').animate({
        width: "50%"
    }, 500, function(){
        alert("animated");
    });
});
This Does Nothing

$('#click').click(function(){
    $('#trans').css({
        width: "50%"
    });
});
This Works As Intended

我希望在单击id为=“ click”的按钮时，id为=“ trans”的div会将宽度从100％减小到50％并产生一个警告，指出“动画”，但是什么也没有发生。对我来说，最奇怪的部分是，如果我使用.css（）方法来更改相同的属性，则它可以完美地工作，但没有有趣的动画外观。

Answer 1

您确定没有看到吗？ https://jsfiddle.net/xbLrpsk6/3/

我确实在#trans DIV上设置了一些初始CSS

#trans {
  background: red;
  display: block;
  width: 100%;
}

Answer 2

在HTML中：

<button class="ui green basic button" id="click">Click</button>
    <div id="trans" style="background-color: #f00;">
        <h4>Hello World</h4>
    </div>

在JavaScript中

$('#click').click(function(){
          $('#trans').animate({
              width: "50%"
          },500,function(){
            alert("animated");
          });
      });

一切都很好。检出：codepen.io

也许，您可能已经更改了CDN文件中的某些内容。

如何使用外部JavaScript文件正确实现jQuery的.animate（）方法？

2 个答案: