Question

我计划在观看视频时创建效果（如Youtube），鼠标不会移动几秒钟，底栏会自动隐藏光标，如果再次移动鼠标光标和条形图会自动显示。有什么建议吗？谢谢

＆＃13;

var countdown;

$(".stage").hover(function() {
  $(".bar").fadeIn();
  clearTimeout(countdown);
});
countdown = setTimeout(function() {
  $(".bar").fadeOut();
}, 5000);

	$(".stage").hover(
		function(e){ $(".bar").fadeIn(); }, // over
		function(e){ $(".bar").fadeOut();

		}  // out
	);

＆＃13;

.stage{
  height:400px;
  width:auto;
  background:#ccc;
  }
.bar{
  height:20px;
  width:auto;
  background:#000;
  display:none;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
  <div class="bar"></div>
</div>

＆＃13;

Answer 1

jQuery中有一个名为.mousemove()的函数可以用于您的目的。

Answer 2

这是一个有效的例子：http://jsfiddle.net/nnnoLkue/。当mousemove消失时，您应该使用.bar显示。{/ p>

$(".stage").hover(function() {
  $(".bar").fadeIn();
    fadeOutBar();
}, function(e){
    $(".bar").fadeOut();
});
$('.stage').mousemove(function() {
    $(".bar").fadeIn();
    fadeOutBar();
});
function fadeOutBar() {
    setTimeout(function() {
      $(".bar").fadeOut();
    }, 2000);
}

Answer 3

time = 0;

time = setInterval(function(){
    //hide bar if he counts to 5 sec
    $(".bar").fadeOut();
},5000);

$('#video').mousemove(function(){
    clearInterval(time);
    //show bar
    $(".bar").fadeIn();
});

Answer 4

如果要删除旧的悬停并重新悬停元素，请先隐藏.bar

$('.stage').mousemove(function() {
   $(".bar").hide();
   $(".bar").fadeIn();
});

jQuery如果鼠标没有移动

4 个答案: