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

问：

我目前正在为未来的工作机会开发专业作品集。我对我正在练习的所有概念都相当陌生，并且在使用 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（） 方法更改相同的属性，它可以完美运行，但没有有趣的动画外观。