.mouseover in jquery not working

Question

I'm trying to make a simple "one item fades out, another fades in" when the mouse is over an object function in jquery. Unfortunately it doesn't seem to work. Here's the js:

var fadeout = function(target) //fade out the logo and run fadein (fade in the skull)
{
$(target +' .logo').fadeTo(400,0,fadein(target));
};

var fadein = function(target) //fade in the skull 
{
    $(target +' .skull').fadeTo(500,1);
};

//trigger fadein when mouse is over an option 
$('#mortal').mouseover(fadeout('#mortal')); //mortal

When I examine the code in Chrome's console it works fine, but when I mouseover #mortal, nothing happens.

Here's the relevant HTML:

<div class="choice_option" id="mortal">
            <img class="logo" src="img\text\230px-WorldofDarknessLogo.png"></img>
            <img class="skull" src="img\skulls\mortal.png"></img>
</div>

and the relevant CSS:

.logo{ /* text logo in each choice_option */
position: absolute; 
z-index: 0;
}
.skull{ /* skull in each choice_option */
position: absolute;
z-index: 1;
opacity: 0;
}

What am I missing?

Answer 1

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.

Example fiddle

Answer 2

try this:

$(document).ready(function(){
    var fadeout = function(target) //fade out the logo and run fadein (fade in the skull)
    {
      $(target +' .logo').fadeTo(400,0,fadein(target));
    };

    var fadein = function(target) //fade in the skull 
    {
       $(target +' .skull').fadeTo(500,1);
    };

    $(document).on('mouseover', '#mortal', function(){
       fadeout('#mortal')
    }); 
});

Answer 3

Try

$('#mortal').mouseenter(function() {
    fadeout('#mortal');
});

Answer 4

wrap your code in a function to make it work.

Its working ! http://jsfiddle.net/CYLcY/23/

.mouseover(
    function() {    alert('working !');
                    fadeout('#mortal')//mortal
               }); 

Answer 5

use should wrap your code in a method firstly. another thing correctly write syntax for fade-in -fade out for particular object

`

$("#mortal").mouseover(function(){

$('.logo').hide();

});

`

example

Answer 6

You need to attach the fadeout function in your mouseover. Like this:

$('#mortal').mouseover(function(){
    fadeout('#mortal');
}); //mortal