淡入淡出按鈕單擊

-6

此淡入和淡出動畫的CSS樣式看起來很好，但它不能用JavaScript重複使用。一旦該函數執行一次，它不能再通過按鈕onClick觸發，這是怎麼回事？淡入淡出按鈕單擊

//removeClass 
 
//addClass

.elementToFadeInAndOut { 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    -webkit-animation: fadeinout 4s linear forwards; 
 
    animation: fadeinout 4s linear forwards; 
 
    opacity: 0; 
 
} 
 

 
@-webkit-keyframes fadeinout { 
 
    50% { opacity: 1; } 
 
} 
 

 
@keyframes fadeinout { 
 
    50% { opacity: 1; } 
 
}

<button onClick="animationfunction()">Button</button> 
 
<div id="icon" class="elementToFadeInAndOut"></div>

來源

2017-07-28 Reeyona

哪裏'.animate（）'函數？ –

*「這是不可重複使用的JavaScript」* - 因爲你沒有寫js代碼。 –

@Kinduser在-1旗幟上，最好去購買更多的旗幟與你的聲望貨幣。 – Reeyona

你只需要擁有點擊按鈕添加類會員，等到動畫完成，然後刪除類。

var div = document.querySelector(".fade"); 
 
var btn = document.querySelector(".fadeButton"); 
 
btn.addEventListener("click", function(){ 
 
    div.classList.add("elementToFadeInAndOut"); 
 
    // Wait until the animation is over and then remove the class, so that 
 
    // the next click can re-add it. 
 
    setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 4000); 
 
});

.fade{ 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    opacity:0; 
 
} 
 

 
.elementToFadeInAndOut { 
 
    animation: fadeInOut 4s linear forwards; 
 
} 
 

 
@keyframes fadeInOut { 
 
0% { opacity:0; } 
 
50% { opacity:1; } 
 
100% { opacity:0; } 
 
}

<button class="fadeButton">Button</button> 
 
<div class="fade"></div>

來源

2017-07-28 22:00:09

謝謝，我需要JavaScript的幫助。我無法解析它。 – Reeyona

最好的辦法是使用jQuery的功能這裏是進出的切換按鈕的效果淡出的代碼。可以調整通過改變（1000）的時間jQuery中感謝您

$(document).ready(function(){ 
 
\t \t \t \t $('button.btn').click(function(){ 
 
\t \t \t \t \t $("div.elementToFadeInAndOut").fadeOut(1000); 
 
      $("div.elementToFadeInAndOut").fadeIn(1000); 
 
\t \t \t \t }); 
 
\t \t \t \t });

.elementToFadeInAndOut { 
 
    width:200px; 
 
    height: 200px; 
 
    background: red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<button class="btn">Button</button> 
 
<div class="elementToFadeInAndOut"></div>

來源

2017-07-28 22:12:00

單擊即可淡入淡出。 – Reeyona

好的..等等..我會修復 –

淡入淡出按鈕單擊

回答

相關問題