脉动点 JQueryUI，动画不工作

Question

我正在尝试创建一个简单的、可点击的脉动点。单击时，它将把用户移动到另一个站点。问题是我无法制作动画，我已经尝试了很多示例，但动画根本不起作用。点需要完全响应。我已经检查过 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');
};

Answer 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）...是否真的值得使用大锤来为那些使用过时技术的人提供一点养眼之物？

脉动点 JQueryUI，动画不工作

Pulsating Dot JQueryUI, animate not working

javascript

jquery

jquery-ui

jquery-animate