jQuery hover() flickering/fading

Trying to get an image "B" to overlay over image "A" when mouse hovers over image "A". Ideally i want it to fade in.

HTML:

    <div id="prod-image">
        <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" />
    </div>
    <div id="prod-overlay">
        <img src="../imgs/image-B.jpg" />   
    </div>

jQuery:

    $(function() {
    $("#prod-image").hover(function() {
        $(this).next().fadeIn().show();
    }, function() {
        $(this).next().fadeOut().hide();
    }); 
    });

Problem is every time the mouse moves it retriggers the hover effect meaning it blinks on and off as it retriggers every pixel the mouse moves. How can I make it only trigger the second action when we leave the container div, not just m开发者_StackOverflow中文版ove about within it?

Thanks for any help.

[EDIT]

CSS:

    #prod-overlay {
    display: none;
    position: absolute;
        z-index: 999;
    top: 0px;
    }

Basically it just sits this div on top of the other. I don't think it's really relevant? Unless the z-index is messing things up.

[EDIT 2]

for anyone who might care/stumble across this... this fixes it:

$("#prod-image").hover(function() {
    $("#prod-overlay").stop(true).fadeTo("normal",1);
}, function() {
    $("#prod-overlay").fadeTo("normal",0);
}); 

Seems a little unnecessary to me but who am I to criticise jQuery?

What about getting your 2 images within a same container and apply your hover triggering on this container?

<div  id="container">
    <div id="prod-image">
        <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" />
    </div>
    <div id="prod-overlay">
        <img src="../imgs/image-B.jpg" />   
    </div>
</div>

and

$(function() {
$("#container").hover(function() {
    $("#prod-overlay").fadeIn().show();
}, function() {
    $("#prod-overlay").fadeOut().hide();
}); 
});

It should work !