仅在单击时如何使此动画起作用？

Question

我发现了这个很棒的汉堡菜单动画http://codepen.io/Zaku/pen/vcaFr ，我使用了代码，但是当页面加载时，按钮处于“循环”状态。

这是JS：

(function() {

var i, resize;

  i = setInterval(function() {
    return $("div").toggleClass("cross");
  }, 1500);

  $("div").click(function() {
    clearInterval(i);
    return $("div").toggleClass("cross");
  });

  resize = function() {
    return $("body").css({
      "margin-top": ~~((window.innerHeight - 150) / 2) + "px"
    });
  };

  $(window).resize(resize);

  resize();

}).call(this);

我必须更改什么才能使其仅在单击时起作用？

谢谢

Answer 1

只需删除setInterval即可 。

请参见下面的代码：

 (function () { var resize; $('div').click(function () { return $('div').toggleClass('cross'); }); resize = function () { return $('body').css({ 'margin-top': ~~((window.innerHeight - 150) / 2) + 'px' }); }; $(window).resize(resize); resize(); }.call(this)); 

 body, html, div { background: #292a38; margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; } svg { width: 200px; height: 150px; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } path { fill: none; -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); -moz-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); -ms-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25); stroke-width: 40px; stroke-linecap: round; stroke: #a06ba5; stroke-dashoffset: 0px; } path#top, path#bottom { stroke-dasharray: 240px 950px; } path#middle { stroke-dasharray: 240px 240px; } .cross path#top, .cross path#bottom { stroke-dashoffset: -650px; stroke-dashoffset: -650px; } .cross path#middle { stroke-dashoffset: -115px; stroke-dasharray: 1px 220px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <svg viewBox="0 0 800 600"> <path d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200" id="top"></path> <path d="M300,320 L540,320" id="middle"></path> <path d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190" id="bottom" transform="translate(480, 320) scale(1, -1) translate(-480, -318) "></path> </svg> </div>