如何使此动画仅在单击时工作

How to make this animation work only when clicked?

本文关键字：单击 工作 何使此 动画      更新时间：2023-09-26

我找到了这个很棒的汉堡菜单动画 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);

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

谢谢

只需删除 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>

相关文章：