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 。

请参阅以下代码：

＆＃13;

(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));

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在点击时使这个动画有效？

1 个答案: