jQuery悬停功能，与段落标记无法正常工作

Question

我在paragraph tags div中有hover，每次鼠标进入新段落时，动画都会重复。
关于什么是错的任何想法？

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

你可以拥有一次处理这两个事件的功能，这段代码将为你提供一个良好的开端。

$(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);
    }); 
});