時間の経過後に消えるdivを作成するにはどうすればよいですか？

Question

私は数秒後にポップアップして消える通知を作成しようとしていますが、ユーザーがマウスでマウスを動かして消えないようにしたいと考えています。もし私がクリックすると消えてしまいますが、それは必要ではありません。私はどのようにhtmlでホバーを組み込みルビと相互作用させてタイムアウトを止めることができるのか分かりません。私はそれを機能させるために全部を再構成する必要があるかもしれないことを知っています。

setTimeout(function() { 
 
    $('#alert_box').fadeOut('fast'); 
 
}, 3000);

.alert_wrap { 
 
    padding: 0px 50px; 
 
    margin-top: 3px; 
 
    height: 5%; 
 
    background-color: rgba(255, 0, 0, .3); 
 
    border: 3px solid red; 
 
    grid-row-start: 2; 
 
    justify-self: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<% unless notice == nil %> 
 
<div id="alert_box" class="alert_wrap"> 
 
    <p class="notice"><%= notice %></p> 
 
    <p class="alert"><%= alert %></p> 
 
</div> 
 
<% end %>

Answer 1

var myTimeOut = setTimeout("mytimeoutfunction()", 3000); 
 
$('#alert_box').mouseout(function() { 
 
    myTimeOut = setTimeout("mytimeoutfunction()", 3000) 
 
}); 
 

 
$('#alert_box').mouseover(function() { 
 
    clearTimeout(myTimeOut); 
 
}); 
 

 
var mytimeoutfunction = function() { 
 
    $('#alert_box').fadeOut('fast'); 
 
} 
 

 
// On click, fadeout 
 
$("#close").click(mytimeoutfunction);

.alert_wrap { 
 
\t padding: 0px 50px; 
 
\t margin-top: 3px; 
 
\t height: 5%; 
 
\t background-color: rgba(255, 0, 0, .3); 
 
\t border: 3px solid red; 
 
\t grid-row-start: 2; 
 
\t justify-self: center; 
 
} 
 
#alert_box { 
 
    position: relative; 
 
} 
 
#close { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="alert_box" class="alert_wrap"> 
 
\t <p class="notice">This is notice text</p> 
 
\t <p class="alert">This is alert text</p> 
 
    <span id="close">X</span> 
 
</div>

最初のステップであなたがmouseoverで、その後setTimeoutとを使用することができます。ここでは（実行するのに十分ではない）、関連するCSSとHTML/ERBスニペットですまたはhoverイベントの場合は、clearTimeout、したがってを使用してタイムアウト機能をクリアすることができます0は有効になりません。

mouseoutにもう一度setTimeoutを使用して3秒間カウントを開始できます。

clickイベントについても触れているので、clickボタンをクリックするとすぐにタイムアウト機能を呼び出すことができる閉じるボタンが追加されました。

Answer 2

あなたは、CSSアニメーションでそれに近づくこともできます。このような

.alert_wrap { 
 
    padding: 0px 50px; 
 
    margin-top: 3px; 
 
    height: 5%; 
 
    background-color: rgba(255, 0, 0, .3); 
 
    border: 3px solid red; 
 
    grid-row-start: 2; 
 
    animation: alert 4s linear none; 
 
    opacity: 0; 
 
    transition: all .3s ease-in-out; 
 
} 
 

 
@keyframes alert { 
 
    0%, 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
    10% { 
 
    opacity: 1; 
 
    } 
 
    90% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.alert_wrap:hover { 
 
    opacity: 1; 
 
}

<div class="alert_wrap"> 
 
    <p>Some alert</p> 
 
</div>

Answer 3

何かがまた働くかもしれないが、私はおそらく、再び使用（CSSの遷移でこれを行うだろう：ありません（：ホバー）擬似セレクタ）

var handler = setInterval(hideBox, 100); // interval function 
 

 
function hideBox() { 
 
    if ($('.alert_wrap:not(:hover)').length) { // check if the alert is visible and not hovered 
 
    setTimeout(function() { // after 3 seconds 
 
     if ($('.alert_wrap:not(:hover)').length) { // if not hovered yet 
 
     $('.alert_wrap:not(:hover)').fadeOut('fast'); 
 
     clearInterval(handler); 
 
     handler = 0; 
 
     } 
 
    }, 3000);  
 
    } 
 
}