Question

I’ve just started using sprites to cut down HTTP requests and I’m having a little bit of a problem converting my old script for dealing with my hover animations into the new system. I don’t really want to be having a separate function for each button as that is painful especially with the amount of buttons, even copy and paste would be a pain. I don’t believe it’s the most efficient way of doing things either, not by a long shot and efficiency is the aim here.

I have gotten this far with it:

$(".socButton").hover(function(){
        var iD = $(this).attr("id");

        var pos = $("#" + iD).css("background-position");

        var splitPos = pos.split("px");

        splitPos[0] = parseInt(splitPos[0]) += 24;

        newPos = splitPos.join("px");

        alert(newPos);

}, function(){

});

but the newPos variable just isn’t alerting. I’ve tried some easier looking methods of just changing “background-position-x” but no dice there.

I’m not certain I need to identify the id of the element in order to change it, but it is the id which has the background-position in the stylesheet, not the class, so I’m not really certain.

Any guidance greatly appreciate.

Thanks in advance.

EDIT: I feel I should also point out, it was alerting fine before I added the parseInt, but some whacky results were coming about before I added it.

Answer 1

No, you don’t need the ID of the element. jQuery applies inline styles.

Anyway, it would probably be easier if you had a second rule for .socButton in your CSS, i.e. .socButton.hover, which would have correct background position for hover state. In jQuery you would only have to toggle the hover class with $(this).toggleClass('hover').

http://jsfiddle.net/Rn6f4/

$(".socButton").hover(function() {
    var pos = $(this).css("background-position");

    var splitPos = pos.split("px");

    splitPos[0] = parseInt(splitPos[0]);
    splitPos[0] += 24.0;

    newPos = splitPos.join("px");

    alert(newPos);
    $(this).css({"background-position": newPos});

}, function(){

});