Javascript 脉动点JQueryUI，动画不工作

我试图创建一个简单的，可点击的脉动点。单击时，它会将用户移动到另一个站点。问题是我不能让动画工作，我已经尝试了很多例子，动画就是不工作。dot需要完全响应。我已经检查了JQuery和JQueryUI是否工作

代码：

HTML

JAVASCRIPT:

function pulse() {
    $('#dot').animate({
        width: 200, height: 200, 
        opacity: 0.5
    }, 700, function() {
        $('#dot').animate({
            width: 300, height: 300, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

pulse();

if (typeof jQuery.ui !== 'undefined') {
    console.log('WORKING');
};

---

我把它放在评论中，但我认为它应该得到自己的答案

我会质疑jQuery是否是适合这项工作的工具。像这样一个简单的动画是一个可以用技巧完成的任务，使用jQuery有点像用大锤将图钉推入软木板

取而代之的是，考虑使用CSS3动画。它们的设置非常简单，而且确实如此（少数使用较少的浏览器仍然需要迎头赶上）

在这种情况下，CSS很简单：

@关键帧脉冲{
从{
宽度：300px；
高度：300px；
不透明度：1；
}
到{
宽度：200px；
高度：200px；
不透明度：0.5；
}
}

现在已定义动画，请将其应用于元素：

#框{
动画：脉冲700ms缓进缓出无限交替；
}

这些属性依次为：

• 动画名称：

  pulse

• 动画持续时间：

  700ms

• 动画插值：

  ease-in-out

  -提供了良好的平滑度
• 动画重复：

  infinite

• 动画方向：

  alternate

  -单向动画，然后反向动画，依此类推

浏览器将以本机方式处理动画。这意味着它将利用自己的刷新帧来设置动画，其中包括在隐藏浏览器选项卡时降低FPS（通常为零）以减少CPU使用等好处。它将尽可能平滑地制作动画——JavaScript（和jQuery）动画可能会很接近，但永远不会如此平滑

---

关于浏览器兼容性（尤其是旧版IE）。。。仅仅为了给那些技术落后的人提供一点眼力，就用这个大锤真的值得吗？

刚刚把你的代码粘贴在这里，它很好地动画化了：那么你到底在做什么，你期望什么，会发生什么？我正在试着让这个脉冲函数工作。我希望它会像您刚才在JSFIDLE中链接的那样动画，但在我的本地主机上，它只显示SVG图像，没有动画。它应该像你注意到的那样工作，但我的问题是它没有，我的问题是为什么？没有一行JavaScript的动画是完全相同的。jQuery在CSS3中已经成为过去！（不太可能。不过，有些比特是。）

html {
    width:100%;
    height:100%;
}
body {
    width:100%;
    height:100%;
    margin:0px;
    position:relative;
}

.wrapper {
    position: absolute;
    max-width: 45%;
    max-height:45%;
    top:50%;
    left:50%;
    overflow:visible;
}

#dot {
    position:relative;
    max-width:100%;
    max-height:100%;
    margin-top:-50%;
    margin-left:-50%;
}

function pulse() {
    $('#dot').animate({
        width: 200, height: 200, 
        opacity: 0.5
    }, 700, function() {
        $('#dot').animate({
            width: 300, height: 300, 
            opacity: 1
        }, 700, function() {
            pulse();
        });
    }); 
};

pulse();

if (typeof jQuery.ui !== 'undefined') {
    console.log('WORKING');
};