div使用jquery .hover（）闪烁

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_ on logo.png会显示logo_和logo_learn ，但当我在logo.png上悬停时， logo_ $ logo_learn 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();
});