jQuery event propagation?

Question

I'm trying to animate a div using jQuery, the problem is the animation doesn't "propagate" to its children (NOT REALLY SURE IF I AM USING THE RIGHT TERM, I'M SORRY"). Please take a look at my demo, when you hover on the green box, it does the code, but when you hit on the sample text, it goes off .. so it results to restarting the animation again.. hope I explained it right..

also, can anyone share their experiences on how did they master Javascript or its library like jQuery?.. I really want to be good on this specific field..

$('.js_boxFeature').on(" mouseenter", function () {     
    $(this).animate({
        "top": "-20px"
    }, "fast");
});


$('.js_boxFeature').on(" mouseout", function () {
    $(this).animate({
        "top": "0"
    }, "fast");
});

Here's my Fiddle

Answer 1

Be aware, you could use pseudo event hover in/out handler like this:

DEMO

$('.js_boxFeature').hover(function (e) {
    $(this).stop().animate({
        top: e.type === "mouseenter" ? "-20px" : 0
    }, "fast");
});

Or using only CSS pseudo class :hover:

.js_boxFeature {
    position:absolute;
    width:200px;
    height:200px;
    background:green;
    top:0;
    -webkit-transition: top 200ms linear;
    transition: top 200ms linear;
}
.js_boxFeature:hover {
    top:-20px;   
}

DEMO CSS

Answer 2

The problem seems to be the use of mouseout event instead of mouseleave

$('.js_boxFeature').on("mouseleave", function () {
    $(this).stop(true).animate({
        "top": "0"
    }, "fast");
});

Demo: Fiddle