Question

我使用下面的代码在10秒内淡出#widget，在10.0secs中淡出#floating_widget。这很好。

但是，当我点击或鼠标悬停#widget容器时，＃widget容器不应淡出。现在，由于setTimeout代码，它会自动淡出。

请告诉我如何解决此问题？感谢

HTML：

<div id="widget">
  <h1>Hello World!</h1>
</div>

<div id="floating_widget">
  <h2>Hello World 2!</h2>
</div>

JS：

setTimeout(function() {
    $('#widget').fadeOut('slow');
}, 10000);
setTimeout(function() {
    $('#floating_widget').fadeIn('slow');
}, 10200);
$('#floating_widget').click(function(){
    $(this).hide();
    $('#widget').show();
});

Answer 1

我希望我对你的问题有正确的理解。您似乎有超时问题。您必须在onmouseover函数中清除它们。以下是JavaScript的示例：

var $widget = $('#widget')
var $floatingWidget = $('#floating_widget')

var widgetFadeTimeout = setTimeout(function() {
  $widget.fadeOut('slow')
}, 10000)
var floatingWidgetFadeTimeout = setTimeout(function() {
  $floatingWidget.fadeIn('slow')
}, 10200)

$widget.mouseover(function() { // https://api.jquery.com/mouseover
  // Remove the timeout to avoid triggering the fadeOut and fadeIn
  clearTimeout(widgetFadeTimeout) // https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout
  clearTimeout(floatingWidgetFadeTimeout)
  // In case the element began the transitions stop them
  $widget.stop()
  $floatingWidget.stop()
  $floatingWidget.hide()
  $widget.show()
})

$floatingWidget.click(function() {
  $(this).hide()
  $widget.show()
})

我希望这对你有用！

鼠标悬停或在div上单击事件时阻止淡出

1 个答案: