1

Possible Duplicate:
jquery animate background position

I got a button that should have a animation on the background element.

The arrow should slide down on hover and slide backup on hover out. This works fine on Chrome.

This animation is working properly in Chrome and IE8.

IE9: On hover the background just flips with no sliding effect. But on hover out, the sliding animation works.

FF: Nothing. No flick...

http://egelect.com/2013/index-test.php

Any suggestions?

HTML

<div id="bienvenue">Bienvenue<span id="separator">&nbsp;</span></div>

jQuery

<script type="text/javascript">
$('document').ready(function() {
   $('#bienvenue').css({backgroundPosition: "right 100%"}).hover(
       function() {
           $(this).stop().animate({'background-position-y': "0%"}, "600");
       }, function() {
           $(this).stop().animate({'background-position-y': "100%"}, "600");
       }
   );
});
</script>
Community
  • 1
  • 1
PMaly
  • 151
  • 1
  • 1
  • 8

1 Answers1

1

Firefox doesn't understand background-position-y, only background-position (with both x and y values, in that order).

Here is a plugin that claims to solve the problem, however. Alternatively, you can replace your background image with layered images and animate that position instead.

Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • This is true. Ran into this problem myself with spritesheets. Turned out to be a real hassle. –  Jan 18 '13 at 19:30
  • @lunchmeat317, what did you ended up doing? And what about IE9s behavior? Just tried to animate `backgroundPosition`, but didn't work... – PMaly Jan 18 '13 at 20:11
  • You may also look at [this question](http://stackoverflow.com/q/6877081/677526). –  Jan 18 '13 at 21:31