Wie funktioniert diese Animation nur beim Klicken?

Question

Ich fand dieses tolle Hamburger Menü Animation http://codepen.io/Zaku/pen/vcaFr, ich habe den Code verwendet, aber wenn die Seite geladen wird, ist die Schaltfläche in "Schleife".

Dies ist die 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); 

Was muss ich es nur zu machen, ändern zu arbeiten, wenn darauf geklickt wird?

Danke

Answer 1

einfach die setInterval entfernen.

Sehen Sie den Code unten:

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