Question

I am using CSS Image sprites for roll over effect on a element, the new class to be applied on mouse over is assigned to attribute data-toggle-class and below is the code ( I now this is miniature performance improvement and doing pre-optimization which is not good)

    $("*[data-toggle-class]").hover(function(ev){
        var a = $(this);
        a.toggleClass(a.attr("data-toggle-class"))
    });

• how do I cache data-toggle-class attribute rather than retrieving it every time the hover occurs.
• Even though I use Image sprite there is small lag before the switch effect happens. Is this known issue

Answer 1

I can only answer the question about caching (mostly, see note under the divider below), which you can do with a closure:

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(function() {
        $elm.toggleClass(cls);
    });
});

What that does is, instead of having a single function that gets called for all of the matching elements during hover events, it generates a separate function for each element, where the function closes over a reference to a jQuery wrapper for the element and a copy of its data-toggle-class attribute. It trades off size (more functions = more memory, though you’d have to have a lot of these for it to start to matter) for speed.

If your goal is to have the class on hover and not have it when not hovering, I’d probably do that explicitly:

$("*[data-toggle-class]").each(function() {
    var $elm = $(this),
        cls = $elm.attr('data-toggle-class');
    $elm.hover(
        // Start hover
        function() {
            $elm.addClass(cls);
        },
        // Stop hover
        function() {
            $elm.removeClass(cls);
        }
    );
});

You’ve said

I know this is miniature performance improvement and doing pre-optimization which is not good

…but I’d just like to underscore that. The above will work, probably won’t cause excessive memory use, and will result in a tiny performance enhancement, but I tend to think that enhancement will be below the threshold of human perception.

---

I wonder if you really need the class, and the JavaScript code, at all? Unless you need to support IE6, the :hover CSS pseudo-class is exactly for this purpose, and is handled natively by the browser rather than by JavaScript code (read: faster). For instance:

[data-toggle-class] {
    color: green;
}
[data-toggle-class]:hover {
    color: blue;
}

…will make any element with a data-toggle-class attribute green normally, but blue when hovered. If you need to do different things based on the value of the attribute, you can do that:

[data-toggle-class='foo'] {
    color: green;
}
[data-toggle-class='foo']:hover {
    color: blue;
}
[data-toggle-class='bar'] {
    color: black;
}
[data-toggle-class='bar']:hover {
    color: red;
}

Elements with data-toggle-class="foo" will be green normally, blue when hovered; ones with data-toggle-class="bar" will be black normally, and red when hovered. No JavaScript required.

In the above you understand color is just an example; I expect you’re using background and background-position if you’re using sprites.

---

Here’s a proper example of the CSS technique (live copy | source):

CSS:

.arrow {
    width: 40px;
    height: 40px;
    background-image: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png);
    background-repeat: none;
    display: inline-block;
}
.style1 {
    background-position: 0px -220px;
}
.style1:hover {
    background-position: 0px -320px;
}
.style2 {
    background-position: 0px -260px;
}
.style2:hover {
    background-position: 0px -290px;
}

HTML:

<div class="arrow style1"></div>
<div class="arrow style2"></div>

Note how you can readily control which arrow appears, declaratively, with no JavaScript. Now, of course, if your conditions for which arrow should appear are more complicated than that, you may well have to go to JS. I’m just saying, for most simple hover ops, it’s not needed.