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）...使用大锤真的值得为过时技术的人提供一点点眼睛吗？

Pulsating Dot JQueryUI，动画不起作用

1 个答案: