jQuery hover function, not working as expected with paragraph tags

Question

I have paragraph tags within a hover div and each time the mouse enters a new paragraph the animation repeats.
Any ideas on what is wrong?

JS

$(document).ready(function() {
    $("#container1a").mouseover(function() {
         $('#col1start').stop(true, true).fadeOut(800);
         $('#col1start').hide();
         $('#col1hover').stop(true, true).fadeIn(800);
      });
      $("#container1a").mouseout(function() {
         $('#col1hover').stop(true, true).fadeOut(800);
         $('#col1hover').hide();
         $('#col1start').stop(true, true).fadeIn(800);
      });
});

HTML

<div id="container1a">
    <div id="col1start">
        <p>text1</p>
        <p>text2</p>
        <p>text3></p>
    </div>
</div>

Answer 1

you can have function that handle both events at once, this code will give you a good start.

$(document).ready(function() {
    $('#container1a').hover(function() {

        $('#col1start').stop(true, true).fadeOut(800);
        $('#col1start').hide();
        $('#col1hover').stop(true, true).fadeIn(800);

    }, function() {

        $('#col1hover').stop(true, true).fadeOut(800);
        $('#col1hover').hide();
        $('#col1start').stop(true, true).fadeIn(800);
    }); 
});