jQuery .hover（）性能怀疑

Question

While I know some jQuery to simplify front-end manipulation programming, I also aware of some of some "best practices" to level up the performance on browser, like caching through var and always descend from ID selectors. But I have doubts about this piece of code. Could it be done better?

Preamble: This code animates several blocks inside the (already cached) selector through .hover().

The HTML is something like this:

<div clas="block-link red">(...)</div>
<div clas="block-link yellow">(...)</div>
<div clas="block-link magenta">(...)</div>
<div clas="block-link moradopelusa">(...)</div>

And the jQuery to animate at hovering inside one of them:

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).hover(function(){
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate in; show everything */
    jQuery(this_block_text).animate(..);
    jQuery(this_block_image).animate(..);
    jQuery(this_block_link).animate(..);
    jQuery(this_block_link_icon).animate(..);

}, function() {
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate out; put everything where they belong */
    jQuery(this_block_text).animate(..);
    jQuery(this_block_image).animate(..);
    jQuery(this_block_link).animate(..);
    jQuery(this_block_link_icon).animate(..);
});

I'm seeing that I am declaring variables again after hover, but I don't know any technique to not doing again. Anyway, even that way it works like a charm.

Update: Fixed Code #1

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).on('mouseenter mouseleave', function(){
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate in; show everything */
    this_block_text.animate(e.eventType(...));
    this_block_image.animate(e.eventType(...));
    this_block_link.animate(e.eventType(...));
    this_block_link_icon.animate(e.eventType(...));
});

Note 1: Yes, i'm using cached_blocks in other part of the code.

Answer 1

You seem to be repeating code for no good reason?

var cached_blocks = jQuery('.block-link');

cached_blocks.on('mouseenter mouseleave', function(e) {
    var this_block = jQuery(this),
        this_block_text = this_block.children('div.text'),
        this_block_image = this_block.children('div.image'),
        this_block_link = this_block.children('div.link'),
        this_block_link_icon = this_block.children('a.icon');

    this_block_text.animate({something: (e.type==='mouseenter' ? 0 : 400)});
    this_block_image.animate({top: (e.type==='mouseenter' ? 10 : 200)});
    this_block_link.animate({left: (e.type==='mouseenter' ? 300 : 40)});
    this_block_link_icon.animate({right: (e.type==='mouseenter' ? 0 : 1400)});
});

Unless you are using the variables containing the text/image/link... elements somewhere else aswell, caching them just to use with animate() on the next line is a waste of space.

Answer 2

I think you can bind mouseout and mouseover with the same callback closure ($element.on("mouseout mouseover", callback)) , and detect which event is inside the closure with something like e.type == "mouseout" .

In your code you are doing

this_block_text = jQuery(this_block).children(div.text)

and then

jQuery(this_block_text).animate(..);

why not this?

this_block_text.animate(..)

this_block_text is already a jQuery object

Answer 3

jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);

there is no need to write them as jQuery(...) because this_block_text, this_block_image etc. are already jQuery objects.

this_block_text.animate()

will run.

Also using $.() instead of jQuery() is better and cleaner.

And $('div.block-link') is faster than $('.block-link')

Answer 4

The thing which stands out the most in this code is how often you are calling jQuery . If you already have a jQuery object, there is no need to call jQuery again.

This:

var cached_blocks = jQuery(".block-link");
jQuery(cached_blocks).hover(...);

does the same thing as:

var cached_blocks = jQuery(".block-link");
cached_blocks.hover(...);

If you're not going to reuse cached_blocks there's not going to be any performance improvement from having it, so you could simplify the code to just:

jQuery(".block-link").hover(...);

If the elements are already on the page, I'd simplify the code down to:

var links = jQuery(".block-link");

var parts = {
    text: links.children("div.text"),
    image: links.children("div.image"),
    link: links.children("div.link"),
    icon: links.children("a.icon")
};

links.hover(function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
}, function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
});

Without knowing what sort of animations you want to do, I can't simplify it any more, but I suspect you won't need so many calls to animate either.