如何讓這個動畫只在點擊時工作？

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>