Question

我想让一个面板在点击一个按钮后显示五秒钟....

然后，如果用户点击面板（使用它......），面板会继续显示，否则会隐藏失效。

因此，如果用户使用它（点击或悬停在其上），面板可以延长其使用寿命......否则它只是fadeOut

我做错了什么？

我尝试使用clearTimeout，但最终会出现在一个奇怪的行为代码段中。我尝试用布尔值重新编写代码，但同样......我无法按照预期的方式工作

＆＃13;

 
  let ShowPanel = 0;
 $('.ShowPanel5Seconds').on("click", function() {
      ShowPanel = 1;

      $(".Panel").show();
      setTimeout(function() {
        $(".Panel").fadeOut();
      }, 5000)


    });

    //clicking hoverin on the panel

     $('.Panel,.container').on("click", function(event) {
      if (1 == ShowPanel) {

        $('.ShowPanel5Seconds').trigger("click");
       }
     });

＆＃13;

     .container{
       position:relative; 
       width:300px;
       height:300px;
       border:1px solid blue;
       margin:10px
        }
      .Panel {
      display: none;
      position:absolute;
      top:10px;
      left:10px;
      background: red;
      height: 100px;
      width: 50px;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	
	<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>
    <div class="container">
    <div class="Panel">I'm the panel...click me to continue living</div>
    </div>

＆＃13;

Answer 1

另一种方法是按预期工作，保留超时变量，剩余时间显示div。

let timeleft = 0;

function hide_or_not() {
  timeleft = timeleft - 1;
  if (timeleft <= 0) {
    $(".Panel").fadeOut();
  }
  setTimeout(hide_or_not, 1000);
}

$('.ShowPanel5Seconds').on("click", function() {
  $(".Panel").show();
  if (timeleft <= 0) {
    timeleft = 5;
    hide_or_not();
  }
});

//clicking hoverin on the panel

$('.Panel').on("click", function(event) {
  timeleft = timeleft + 1;
});

.Panel {
  display: none;
  background: red;
  height: 100px;
  width: 50px;
}
<scri

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>

<div class="Panel">I'm the panel...click me to continue living</div>

注意：代码是可读的，不完全是最佳的。

Answer 2

您可以通过addClass，removeClass()和:not()选择器

来控制此问题

// on button click show/fadeOut the panel but not the panel with class hover
$('.ShowPanel5Seconds').on("click", function() {
  $(".Panel:not(.hover)").show();
  setTimeout(function() {
    $(".Panel:not(.hover)").fadeOut();
  }, 5000)
});

// when hover over the panel add class hover and remove it when unhover and trigger the button click
$('.Panel:not(.hover)').hover(function(event){
  $(this).addClass('hover');
} , function(){
  $(this).removeClass('hover');
  $('.ShowPanel5Seconds').click();
});

.Panel {
  display: none;
  background: red;
  height: 100px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>

<div class="Panel">I'm the panel...click me to continue living</div>

Answer 3

你太复杂了。只需一次显示/延长时间

let panel = $('.Panel'),
    panelTimer;

function showAndExtendPanel(){
  panel.stop(true,true).show();
  clearTimeout(panelTimer);
  panelTimer = setTimeout(killPanel, 5000)
}

function killPanel(){
  panel.fadeOut();
}

$('.ShowPanel5Seconds, .Panel').on("click", showAndExtendPanel);

.Panel {
  display: none;
  background: red;
  height: 100px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<button class="ShowPanel5Seconds">Show Panel 5 seconds</button>

<div class="Panel">I'm the panel...click me to continue living</div>

单击按钮重新激活autohidden-div不工作，小提琴Jquery

3 个答案: