Animate background position different behaviours

Question

I'm not that good with jQuery animations, but i'm trying to animate an background image when mouse enters on its element. The animation is simple, mouse enters, the image moves a little to the left. Mouse leaves, image returns to its position.

I could have that working on Chrome, but with a different behaviour in IE. FF doesn't event move anything. My is the following:

$(".arrow").on("mouseenter", function()
{
    $(this).stop(true).animate({ "background-position-x": "75%" });
}).on("mouseleave", function()
{
    $(this).stop(true).animate({ "background-position-x": "50%" });
});

Where .arrow is a div with these properties:

.arrow {
    width: 50px;
    padding: 10px 0;
    background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
    background-size: 16px
}

And here is a demo.

What is most strange for me is the case of IE. It seems that the animation start always from left to right, not middle right. It occours when mouses leaves too. Any ideas ?

score 4 · Accepted Answer · edited May 23 '17 at 10:24

4

Because Firefox doesn't support backgroundPositionX, but it does support background position

Try this code in firefox and InternetExplorer:

$(".arrow").on("mouseenter", function()
{
    $(this).stop(true).animate({ "background-position": "75%" });
}).on("mouseleave", function()
{
    $(this).stop(true).animate({ "background-position": "50%" });
});

More Info: backgroundPositionX not working on Firefox

Here is Updated Demo working well with FF and IE

edited May 23 '17 at 10:24

Community

1
1

answered May 21 '14 at 12:58

Manwal

23,450
12
63
93

Nice, this fixed both FF and IE problems, as well keep Chrome working too. [Updated Demo](http://jsfiddle.net/q94Sm/2/). Thank you. – DontVoteMeDown May 21 '14 at 13:01
Great @DontVoteMeDown you can accept answer for future reference. – Manwal May 21 '14 at 13:04

score 2 · Answer 2 · answered May 21 '14 at 13:05

2

I know Manwal has solved it , but it can also be done very easily in CSS3 like so:

    .arrow {
        float:left;
        width: 50px;
        padding: 10px 0;
        background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
        background-size: 16px;
        transition: all 2s ease-in-out;
    }

        .arrow:hover {

            transform :translateX(50px);
        }

where translate 50px will be the value you wish to move it along the X axis

answered May 21 '14 at 13:05

EaziLuizi

1,557
1
16
25

Nice tip. How much *cross-browser* it is ? – DontVoteMeDown May 21 '14 at 13:06
That may be the catch, heres W3schools chart: http://www.w3schools.com/cssref/css3_browsersupport.asp – EaziLuizi May 21 '14 at 13:08
1

I prefer anything but w3schools, like [this](http://caniuse.com/css-transitions). I will take a look, besides, I will keep the accepted answer beucause it answers the question. I have upvote your answer. Thank you dude. – DontVoteMeDown May 21 '14 at 13:13
1

thanks for link, i may have a new favorite reference site :), thanks – EaziLuizi May 21 '14 at 13:16

Animate background position different behaviours

2 Answers2