jQuery hover animation efficiency

Question

I've got my hover working - but i'm interested in trying to make it more efficient as it does seems to 'lag' when it's finding the .overlay div. I also had the issue where I was animating all .overlay divs on a page, which I consider to be quite a noob mistake.

Anyway, let's learn how to make the below better!

jQuery:

// get aside feature
var aside_feature = $('aside .feature');

// on hover, fade it in
$( aside_feature ).hover(function() {
    // get the overlay div
    var feature_overlay = $(this).find('.overlay');
    $(feature_overlay).stop().fadeIn();
// on hover out, fade it out
}, function() {
    $(this).find('.overlay').stop().fadeOut();
});

Markup:

<aside>
    <div class="feature">
        <div class="overlay">
            <a href="">button</a>
        </div><!-- overlay -->                                          
        <div class="text">
            <p>text</p>
        </div><!-- .text-->
        <div class="image">
            <figure>
                <img src="" alt="">
            </figure>
        </div><!-- .image -->
    </div><!-- .feature -->
</aside><!-- aside -->

Fiddle: http://jsfiddle.net/9xRML/5/

Edit - Final Code

Thanks @Shomz, and @Afro.

Final code choices were to use tranisitons, and coupled with modernizr detection for transitions, I changed my hidden overlay div to opacity: 0; *display:none; and javascript as a fallback:

CSS

.overlay {
   *display: none;
   opacity: 0; 
   transition: 0.4s all linear;
}
.overlay:hover {
   opacity: 1;
}

jQuery

$(function () {
    /*=====================================
    =           Feature overlay           =
    =====================================*/
    if (!Modernizr.csstransitions) {
        // get aside feature
        var aside_feature = $('aside .feature');

        // on hover, fade it in
        $( aside_feature ).hover(function() {
            $(this).find('.overlay').stop(true, true).fadeIn();
        // on hover out, fade it out
        }, function() {
            $(this).find('.overlay').stop(true, true).fadeOut();
        });
    }
});

And you want to make those enimovali all at once? Or what exactly do you need? — Pesulap
– Pesulap, Commented Jan 28, 2014 at 11:44
Hey, no problem. I think (this) gives that question away as it refers to the element hovered over and not all the divs on the page :) — SMacFadyen
– SMacFadyen, Commented Jan 28, 2014 at 11:51

Shomz · Accepted Answer · 2014-01-28 11:51:16Z

1

With risking of having my answer out of scope here, if you want to really get performance, you should switch to CSS animations. It's totally possible with your example by setting the default opacity of the overlay to 0 (instead of display: none;) and making it show up on .feature:hover. The trick is to add the transition property like this:

// applies a 4ms transition to any possible property with no easing
transition: all .4s linear;

See the whole example here: http://jsfiddle.net/9xRML/6/

See a nice article about the performance difference (CSS vs. JS) here: http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/ (there are many more, of course)

answered Jan 28, 2014 at 11:51

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SMacFadyen Over a year ago

I like this idea, I could use specific CSS classes to target browsers that don't support transitions. Or better still, modernizr jQuery: if (!Modernizr.csstransitions) { // my code };. Thanks for thinking outside the box, Shomz.

Shomz Over a year ago

@SMacFadyen Definitely, it's always nice to have a nice fallback for those old browsers, sorry I forgot to bring it up in the first place. You're welcome! :)

AfromanJ · Accepted Answer · 2014-01-28 11:43:02Z

1

I think I have solved your issue using the same HTML but changing the following:

JQuery

$('aside .feature').hover(function() {
    $(this).find('.overlay').stop(true, true).fadeIn();
}, function() {
    $(this).find('.overlay').stop(true, true).fadeOut();
});

CSS

.feature {
    background: #ccc;
}
.overlay {
    display: none;
}

This means the overlay will only display on hover.

Details on .stop() can be found here.

.stop(true, true)

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain.

DEMO

answered Jan 28, 2014 at 11:43

AfromanJ

3,9323 gold badges20 silver badges34 bronze badges

1 Comment

SMacFadyen Over a year ago

Thanks for this answer, it's helpful and I will use it for the fallback - however, the transition answer will be better suited for anyone who arrives here!

Collectives™ on Stack Overflow

jQuery hover animation efficiency

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related