CODEWITHSUNDEEP
javascriptjqueryhtml
Mrigank
Mrigank

Reputation: 151

div blinking on using jquery .hover()

<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.

Upvotes: 1

Views: 1264

Answers (1)

Anton
Anton

Reputation: 32591

Use onmouseenter and .stop() like this

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

Update

What @epascarello said, dont use inline event handlers, use .on() like this code below

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

Upvotes: 4

Related Questions