クリック時に関数を実行して2回目のクリックで反転する

Question

ページが更新されるとすぐに画面からアニメーションするテキストがあります。バーガーアイコンがクリックされたときに呼び出されるように機能する必要があります。その後、アイコンが開いて再びクリックされると、可能であれば最初の文字（C）が最初に戻ってくるように、機能を元に戻したいと思います。

jQuery("#button").click(function() { 
 
    jQuery(".line1").toggleClass("open1"); 
 
    jQuery(".line2").toggleClass("open2"); 
 
    jQuery(".line3").toggleClass("open3"); 
 
}); 
 

 
(function text_loop(i) { 
 
    setTimeout(function() { 
 
    if (i <= 15) 
 
     $("#logo_text span").eq(i).addClass("slide_out"); 
 
    i++; 
 
    text_loop(i); 
 
    }, 100); 
 
})(0);

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 350px; 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
    position: relative; 
 
    top: 0; 
 
    transition: top 1s ease; 
 
} 
 

 
#logo_text span.slide_out { 
 
    top: -60px; 
 
    transition: top 0.5s ease; 
 
} 
 

 
.line1, 
 
.line2, 
 
.line3 { 
 
    transition: all 0.3s ease; 
 
} 
 

 
.open1 { 
 
    transform-origin: top left; 
 
    transform: translatex(3px) translatey(-1px) rotate(45deg); 
 
    width: 33px; 
 
} 
 

 
.open2 { 
 
    opacity: 0; 
 
} 
 

 
.open3 { 
 
    transform-origin: bottom left; 
 
    transform: translatex(3px) translatey(1px) rotate(-45deg); 
 
    width: 33px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 

 
<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;"> 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 

 
    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
    </div> 
 
</div>

Answer 1

は関数としてそれを呼び出すと、あなたのsetTimeoutは声明

jQuery("#button").click(function() { 
 
    jQuery(".line1").toggleClass("open1"); 
 
    jQuery(".line2").toggleClass("open2"); 
 
    jQuery(".line3").toggleClass("open3"); 
 
    var currentClass = $("#logo_text span").eq(0).attr('class'); 
 
    if(currentClass === undefined || currentClass == "slide_in") { 
 
    text_loop(0, 'slide_out'); 
 
    } 
 
    else { 
 
    text_loop(0, 'slide_in'); 
 
    } 
 
}); 
 

 
function text_loop(i, classname) { 
 
    setTimeout(function() { 
 
    if(i <= 15) { 
 
     $("#logo_text span").eq(i).attr('class', classname); 
 
     i++; 
 
     text_loop(i, classname); 
 
    } 
 
    }, 100); 
 
}

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 350px; 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
    position: relative; 
 
    top: 0; 
 
    transition: top 1s ease; 
 
} 
 

 
#logo_text span.slide_out { 
 
    top: -60px; 
 
    transition: top 0.5s ease; 
 
} 
 

 
#logo_text span.slide_in { 
 
    top: 0px; 
 
    transition: top 0.5s ease; 
 
} 
 

 
.line1, 
 
.line2, 
 
.line3 { 
 
    transition: all 0.3s ease; 
 
} 
 

 
.open1 { 
 
    transform-origin: top left; 
 
    transform: translatex(3px) translatey(-1px) rotate(45deg); 
 
    width: 33px; 
 
} 
 

 
.open2 { 
 
    opacity: 0; 
 
} 
 

 
.open3 { 
 
    transform-origin: bottom left; 
 
    transform: translatex(3px) translatey(1px) rotate(-45deg); 
 
    width: 33px; 
 
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 

 
<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;"> 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 

 
    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
    </div> 
 
</div>

Answer 2

私はあなたが望む行動を処理するために、あなたのコード内のいくつかの変更を行いました。あなたが見ることができるように

jQuery("#button").click(function() { 
 

 
    jQuery(".line1").toggleClass("open1"); 
 
    jQuery(".line2").toggleClass("open2"); 
 
    jQuery(".line3").toggleClass("open3"); 
 

 
if(jQuery("#button").data("shown") == "True"){ 
 

 

 
    
 
    (function text_loop(i) { 
 
    setTimeout(function() { 
 
    if (i <= 15) 
 
\t $("#logo_text span").eq(i).removeClass("slide_in"); 
 
     $("#logo_text span").eq(i).addClass("slide_out"); 
 
    i++; 
 
    text_loop(i); 
 
    }, 100); 
 
})(0); 
 

 
jQuery("#button").data("shown", "False") 
 
    }else { 
 
    (function text_loop(i) { 
 
    setTimeout(function() { 
 
    if (i <= 15) 
 
     $("#logo_text span").eq(i).removeClass("slide_out"); 
 
\t $("#logo_text span").eq(i).addClass("slide_in"); 
 

 
\t 
 
    i++; 
 
    text_loop(i); 
 
    }, 100); 
 
})(0); 
 
jQuery("#button").data("shown", "True") 
 
    } 
 
    
 
    
 
});

#burger_container { 
 
    background-color: #404041; 
 
    display: block; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 60px; 
 
    z-index: 101; 
 
} 
 

 
svg { 
 
    margin: 20px auto 0 auto; 
 
    display: block; 
 
} 
 

 
#logo_text { 
 
    transform: rotate(-90deg); 
 
    margin-top: 350px; 
 
    font-size: 40px; 
 
    color: #ffffff; 
 
    font-weight: 700; 
 
} 
 

 
#logo_text span { 
 
    font-weight: 400; 
 
    position: relative; 
 
    top: 0; 
 
    transition: top 1s ease; 
 
} 
 

 
#logo_text span.slide_out { 
 
    top: -60px; 
 
    transition: top 0.5s ease; 
 
} 
 

 
#logo_text span.slide_in { 
 
    top: 0px; 
 
    transition: top 0.5s ease; 
 
} 
 

 

 

 
.line1, 
 
.line2, 
 
.line3 { 
 
    transition: all 0.3s ease; 
 
} 
 

 
.open1 { 
 
    transform-origin: top left; 
 
    transform: translatex(3px) translatey(-1px) rotate(45deg); 
 
    width: 33px; 
 
} 
 

 
.open2 { 
 
    opacity: 0; 
 
} 
 

 
.open3 { 
 
    transform-origin: bottom left; 
 
    transform: translatex(3px) translatey(1px) rotate(-45deg); 
 
    width: 33px;

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 

 
<div id="burger_container"> 
 
    <div> 
 
    <svg id="button" style="height: 26px; width: 26px;" data-shown="True" > 
 
     <g style="" fill="#f04d43"> 
 
     <rect class="line1" x="0" y="1" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line2" x="0" y="11" rx="2" ry="2" width="26px" height="4px" /> 
 
     <rect class="line3" x="0" y="21" rx="2" ry="2" width="26px" height="4px" /> 
 
     </g> 
 
    </svg> 
 

 
    <div id="logo_text"><span>C</span><span>o</span><span>m</span><span>p</span><span>a</span><span>n</span><span>y</span>&nbsp;<span>W</span><span>o</span><span>r</span><span>k</span><span>f</span><span>o</span><span>r</span><span>c</span><span>e</span></div> 
 
    </div> 
 
</div>

iはonclcikイベントハンドラにコードを変更しました。 と私は、slide_inという名前のCSSで新しいクラスを追加しました。

私の答えがあなたを助けてくれることを願っています。