脉动点 JQueryUI，动画不起作用答案

【问题标题】：Pulsating Dot JQueryUI, animate not working脉动点 JQueryUI，动画不起作用
【发布时间】：2015-12-09 11:57:27
【问题描述】：

我正在尝试创建一个简单的、可点击的脉动点。单击时，它将把用户移动到另一个站点。问题是我无法制作动画，我尝试了很多例子，动画根本不起作用。点需要完全响应。我已经检查过 JQuery 和 JQueryUI 是否正常工作。

代码：

HTML

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
    <script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body>
    <div class="wrapper">        
          <img id="dot" class="wrapper__dot" src="images/dot.svg" alt="Click to enter site">
    </div>
  </body>
</html>

CSS：

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%;
}

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');
};

【问题讨论】：

刚刚将您的代码粘贴到这里，它的动画效果很好：jsfiddle.net/8cehs3dc
那么你到底在做什么，你期待什么，会发生什么？
我正在尝试让这个脉冲功能正常工作。我希望它会像您刚刚在 JSFiddle 中链接一样进行动画处理，但在我的本地主机上它只显示没有动画的 SVG 图像。它应该像你注意到的那样工作，但我的问题是它没有，我的问题是为什么？
和here 是完全相同的动画，没有一行 JavaScript。 jQuery 在 CSS3 中已成为过去！（不是真的。不过有些是。）

标签： javascript jquery jquery-ui jquery-animate

【解决方案1】：

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

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

请考虑使用 CSS3 动画。它们的设置非常简单，它们是basically universally supported（少数使用较少的浏览器仍需要追赶）。

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

@keyframes pulse {
    from {
        width: 300px;
        height: 300px;
        opacity: 1;
    }
    to {
        width: 200px;
        height: 200px;
        opacity: 0.5;
    }
}

现在您已经定义了动画，将其应用到您的元素：

#box {
    animation: pulse 700ms ease-in-out infinite alternate;
}

按顺序，这些属性是：

动画名称：pulse
动画时长：700ms
动画插值：ease-in-out - 提供了不错的平滑度
动画重复：infinite
动画方向：alternate - 动画单向，然后返回，依此类推

浏览器会原生处理动画。这意味着它将利用自己的刷新帧之类的东西来为其设置动画，其中包括在隐藏浏览器选项卡以减少 CPU 使用率时降低 FPS（通常为零）等奖励。它将尽可能流畅地制作动画 - JavaScript（和 jQuery）动画可能会接近，但永远不会那么流畅。

关于浏览器兼容性（尤其是较旧的 IE）... 是否真的值得使用大锤来为技术过时的人提供一点眼睛糖果？

【讨论】：