Change background-position of an image?

Question

hello good afternoon community. I want to move your background-position in xa this image to act as a video but do not mistake that I have Thanks before hand

$(document).ready(function() {
    $('.imagen').mouseenter(function(){
        var numero = -535;
        var suma;
        for (var i = 1; i <= 10; i++) {
            $(this).css({'backgroundPosition': suma+"px 0px"}, "-10");
            suma = numero * i;
        }
    }
});

http://jsfiddle.net/kiokotzu/zw8rB/

sorry is this link http://jsfiddle.net/kiokotzu/zw8rB/4/ – kiokotzu Aug 15 '13 at 20:05 — kiokotzu, Aug 15 '13 at 20:05

score 1 · Answer 1 · answered Aug 15 '13 at 20:04

1

you should use background-position not backgroudPosition in '' and there was a syntax error as you did not close brackets

http://jsfiddle.net/zw8rB/2/

$(document).ready(function() {
    $('.imagen').mouseenter(function(){
        var numero = -535;
        var suma;
        for (var i = 1; i <= 10; i++) {
            $(this).css({'background-position': suma+"px 0px"}, "-10");
            suma = numero * i;
        }
    }
);
    });

answered Aug 15 '13 at 20:04

Hushme

3,108
1
20
26

Hushme how do I change the background position from time to time? – kiokotzu Aug 15 '13 at 20:08
you mean you want a mouseout function too? – Hushme Aug 15 '13 at 20:09
I need a function that changes the background position from time to time to act as a video – kiokotzu Aug 15 '13 at 20:11
do u mean like that http://www.zoompanningeffectslider.com/type_FullWidth.html – Hushme Aug 15 '13 at 20:16
something like this http://larealpari.com/ – kiokotzu Aug 15 '13 at 20:22
than simply embed a video file in background – Hushme Aug 15 '13 at 20:26
that's not a video is just images can not do Solocom images? – kiokotzu Aug 15 '13 at 20:28
It's not a video that is an image sprite and they are basing the frame on the position of the mouse on the screen. http://larealpari.com/_/img/foto2.jpg – Drew Dahlman Aug 15 '13 at 20:31
you can do that in css3 keyframes animation too – Hushme Aug 15 '13 at 20:33

score 0 · Answer 2 · answered Aug 15 '13 at 20:10

There are 2 reasons why your script wasn't working.

Your CSS ~ jQuery element wasn't vaild, here is a vaild one:

$(this).css({'background-Position': suma + "px 0px"}, "-10");
you had missing ); in the one of the }, so the function wasn't excute. ( }); )

Change background-position of an image?

2 Answers2