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