javascript - div blinking on using 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>

I have this html such that on hovering on logo.png, logo_ and logo_learn are shown but when i run this on hovering on logo.png, logo_ $ logo_learn blinks.pls post a simple answer.

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();
  }

演示

更新

@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();
});