Question

<script>
$(document).ready(function () {
    $("#logo_").hide();
    $("#logo_learn").hide();
})

function sl() {
    $("#logo_learn").slideToggle(500);
    $("#logo_").fadeIn();
}

function hl() {
    $("#logo_learn").slideToggle(500);
    $("#logo_").fadeOut();
}
</script>
<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseover="sl()" onmouseout="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>
</html>

我有这样的html，在logo.png上悬停时会显示logo_和logo_learn，但是当我在logo.png上悬停时，logo_ $ {{ 1}} blinks.pls发布一个简单的答案。

Answer 1

像这样使用onmouseenter和.stop（）

<强> HTML

<img id="logo_learn" src="img/logo_learn.png"></img>
<img id="logo" src="img/logo.png" onmouseenter="sl()" onmouseleave="hl()" ></img>
<img id="logo_" src="img/logo_.png" ></img>

<强>的jQuery

  function sl() {
      $("#logo_learn").stop().slideToggle(500);
      $("#logo_").stop().fadeIn();
  }

  function hl() {
      $("#logo_learn").stop().slideToggle(500);
      $("#logo_").stop().fadeOut();
  }

DEMO

<强>更新

@epascarello说，不要使用内联事件处理程序，使用.on()，如下面的代码

$('#logo').on('mouseenter', function () {
    $("#logo_learn").stop().slideToggle(500);
    $("#logo_").stop().fadeIn();
});
$('#logo').on('mouseleave', function () {
    $("#logo_learn").stop().slideToggle(500);
    $("#logo_").stop().fadeOut();
});

div使用jquery .hover（）闪烁

1 个答案: