CODEWITHSUNDEEP
javascriptjqueryanimationjquery-events
user2056915
user2056915

Reputation: 25

jQuery event propagation?

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

Upvotes: 0

Views: 127

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388416

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

Upvotes: 4

Related Questions