0

我正在尝试创建一个会弹出的通知，然后在几秒钟后消失，但我希望用户能够用鼠标将鼠标悬停在它上面以防止它消失。如果可以的话，我还想点击一下让它消失，但这不是必需的。我不确定如何让 html 中的悬停与嵌入式 ruby​​ 交互以停止超时。我知道我可能需要重组整个事情以使其正常工作。这是相关的 css 和 html/erb 片段（不足以运行）：

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

4

3 回答 3

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 {
	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;
}
#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">
	<p class="notice">This is notice text</p>
	<p class="alert">This is alert text</p>
    <span id="close">X</span>
</div>

在第一步你可以使用setTimeout然后on mouseoveror hoverevent，你可以使用清除超时功能clearTimeout，因此fadeout不会生效。

然后mouseout您可以再次使用setTimeout开始计数 3 秒。

另外，由于您提到了单击事件，我添加了一个关闭按钮，单击该按钮可以立即调用超时函数。

于 2017-09-27T08:53:26.130 回答
1

您可以使用 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>

于 2017-09-27T08:57:42.147 回答
0

像这样的东西也可以工作，但我可能会用 CSS 转换来做到这一点（再次使用 :not(:hover) 伪选择器）

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);    
  }
}

于 2017-09-27T09:01:43.860 回答