jquery mouse over and out event firing when mouse is moved quickly over image

Question

I know this looks like a duplicate of: jquery hover() mouseOut event not firing when mouse is moved quickly over link but is not working for me. I'm PHP programmer without knowledge of javascript or jquery. Right now I'm trying to make a very simple icon animation, got 2 images, when mouse is over, it changes to the second image, whith jquery fadeIn fadeOut functions. Very simple. Like in the link above, I make a callback function to fire the fadeOut effect when mouse pointer is out, but when I slightly move the mouse over, the event fires up again, and again. I hope I make myself clear (newbie english speaker). This is the code so far:

<img src="<?= base_url(); ?>img/face1.jpg" id="icon"> //<-- this function is from codeigniter, to get the base url

and the jQuery function (in a separate file):

$(document).ready(function(){
$("#icon").mouseover(function() {
    $(this).fadeOut(1000);
}).mouseout(function(){
    $(this).fadeIn(1000);
});});

Thanks!!

Answer 1

I think it would be better to use .mouseenter().

In that case you just get 1 event, while with mouseover you get many. So your code could be:

$(document).ready(function() {
    $("#icon").mouseenter(function() {
        $(this).fadeOut(1000);
    }).mouseout(function() {
        $(this).fadeIn(1000);
    });
});

You could also do this just with CSS:

#icon {
    transition: opacity 1s;
}
#icon:hover {
    opacity:0;
}

<img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6" id="icon" alt="" />