Your code is very over complicated. You just need to use the callback
parameter when setting up your mouseover
handler. Try this:
$('#mortal').mouseover(function() {
var $logo = $('.logo', this);
var $skull = $('.skull', this);
$logo.fadeOut(function() {
$skull.fadeIn();
});
});
Also, img
tags should be self-closing:
<div class="choice_option" id="mortal">
<img class="logo" src="img\text\230px-WorldofDarknessLogo.png" />
<img class="skull" src="img\skulls\mortal.png" />
</div>
Finally, the .skull
div should be display: none
, not opactiy: 0
for fadeIn
or fadeOut
to work.