CODEWITHSUNDEEP
jquerycssspritebackground-position
godzsa
godzsa

Reputation: 2395

jQuery backgroundPosition css sprites not working together?

I have started making a web portfolio for my photos I'm not a web designer it just interests me. Here is the page : http://jsfiddle.net/RhjJZ/1/ in jsfiddle. I made CSS sprites to make background for the <a> links. I want them to change when the mouse is over them so I made that script with jQuery and it does seem to work, I can't imagine why, tried in a lot of different ways... searched a lot of similar problems on the Internet but they couldn't help me out. If someone pointed out what I did wrong I would be very glad! and my picture for the menu is a 1x296 px one.

Upvotes: 0

Views: 113

Answers (1)

Alex W
Alex W

Reputation: 38253

The problem is that your menu() function is not in the normal scope because of jQuery, so you get the Javascript error: menu(xx) is not a function.

The solution is to set those hard-coded values using the data- prefix attribute scheme and then handle the mouseover and mouseout events with jQuery.

HTML:

<body>
    <header id="menu">
            <h1>dawe's portfolio</h1>

        <nav>   <a id="m_portf" data-one="0" data-two="-37" href="#portfolio"
            width="1px">portfolio</a>
    <a id="m_music" data-one="-72" data-two="-111"
            href="#music">music</a>
    <a id="m_about" data-one="-148" data-two="-185"
            href="#about">about</a>
    <a id="m_contact" data-one="-222" data-two="-259"
            href="#contact">contact</a>

        </nav>
    </header>
</body>

Javascript:

$('a').on('mouseover',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-one')+'px';}, 1500);
});

$('a').on('mouseout',function(){
    $(this).animate({'background-position': '0px ' +$(this).attr('data-two')+'px';}, 1500);
});

Upvotes: 0

Related Questions