如何自動隱藏和顯示元素具有與延遲

Question

JSfiddle

我有一個按鈕，點擊時會創建一個H1輸入，並開始一個進度條。我希望文本在進度條填滿之前消失，並在每次填充時再次開始填充時顯示。我試過jQuery的隱藏（），刪除（），detach（）和空（），但無法找到一種方法，使其能夠做我想做的。

var auto = 3; 
var nb = 0; 

var progress = function(sec) { 
    var interval = 1000; //milliseconds 
    setTimeout(function() { 
    sec = sec + 25; 
    $('#bar').val(sec); 
    if (sec > 100) { 
     $('#bar').val(0); 
     sec = 0; 
     nb++; 
    } 
    if (nb < auto) 
     progress(sec); //call self with new value 
    }, interval) 
} 

$('#battle').click(function() { 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").delay(4500).fadeOut(400); 
    progress(0); //initialize progress bar 
}); 

Answer 1

試試這個。

var auto = 3; 
 
var nb = 0; 
 

 
var progress = function(sec) { 
 
    $('#dam').html("You have hit the " + $('#monsters').val() + " for 5 damage").show().delay(4500).fadeOut(400); 
 
    var interval = 1000; //milliseconds 
 
    setTimeout(function() {  
 
    sec = sec + 25; 
 
    $('#bar').val(sec); 
 
    if (sec > 100) { 
 
     $('#bar').val(0); 
 
     sec = 0; 
 
     nb++; 
 
    } 
 
    if (nb < auto) progress(sec); //call self with new value 
 
    }, interval) 
 
} 
 

 
$('#battle').click(function() { 
 
    progress(0); //initialize progress bar 
 
});

body { 
 
    background-color: #000; 
 
} 
 

 
progress { 
 
    appearance: none; 
 
    -webkit-appearance: none; 
 
    width: 100%; 
 
} 
 

 
progress[value]::-webkit-progress-bar { 
 
    background-color: #000; 
 
    border: 1px solid #81ff14; 
 
    border-radius: 5%; 
 
} 
 

 
progress[value]::-webkit-progress-value { 
 
    color: #81ff14; 
 
} 
 

 
select { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-color: #81ff14; 
 
    color: #81ff14; 
 
    margin-left: 100px; 
 
    margin-top: 15px; 
 
} 
 

 
button { 
 
    background-color: rgba(0, 0, 0, 0); 
 
    border-color: #81ff14; 
 
    color: #81ff14; 
 
    border-radius: 10%; 
 
    float: right; 
 
    margin-right: 100px; 
 
    margin-top: 15px; 
 
} 
 

 
#dam { 
 
    color: #81ff14; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
    max-width: 60%; 
 
    text-align: center; 
 
    float: right; 
 
    margin-top: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<progress max="100" value="0" id="bar"></progress> 
 

 
<select id="monsters"> 
 
    <option>Fly</option> 
 
    <option>Mouse</option> 
 
    <option>Rat</option> 
 
    <option>Rabbid Rabbit</option> 
 
    <option>Baby Ent</option> 
 
    <option>Murloc</option> 
 
    <option>Ent</option> 
 
</select> 
 

 
<button type="button" id="battle">Battle!</button> 
 

 
<p id="dam"> 
 

 
</p>