Question

我目前将悬停状态应用于#ex：

$("#ex").hover(function(event) {
    $("#prod").show();
}, function() {
    $("#prod").hide(0).delay(5000);
});

但是，我还希望将一个onclick状态应用于#prod，它继续显示，但目前它没有因为我在上面编码的行：

$("#prod").hide(0).delay(5000);

任何想法???

Answer 1

使用stop()方法停止当前正在运行的动画。

$("#prod").stop().show();

<小时/> 或者建议使用 @ freedomn -m - finish()方法。

$("#prod").finish().show();

Answer 2

您应该使用jQuery的toggle，finish和unbind函数：

var firstState = function() {
  $("#ex").hover(function() {
    $("#prod").toggle(500);
  });

  $("#ex").unbind('click').click(secondState);
}

var secondState = function() {
    $("#ex").unbind("mouseenter mouseleave");
    $("#prod").finish();

  $("#ex").unbind('click').click(firstState)
}

firstState();

请找到完整的解决方案：fiddle

Answer 3

您可以使用mouseenter事件，该事件仅在您进入目标区域时触发，但在离开时不会停用。通过省略mouseleave事件，您可以有效地使目标在一个州内无限期地停留。目标所在的条件可以通过返回并再次悬停简单地终止。 *单击正方形。

段

＆＃13;

$('#ex').on('mouseenter', function() {
  $('#prod').show();
});
$('#prod').on('click', function() {
  $(this).hide();
});

＆＃13;

#ex {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background: red;
  color: white;
  padding-top: 10px;
  text-align: center;
}
#prod {
  height: 150px;
  width: 150px;
  border: 5px dashed red;
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="prod" style="display:none;">Product</div>
<div id='ex'>Hover</div>

＆＃13;

由于在luke的要求下重新评估问题而改变了程序。

一旦你点击并显示div，然后继续显示直到再次点击

3 个答案:

段