CODEWITHSUNDEEP
javascriptjquerycsswebkittransform
Brennan Sei
Brennan Sei

Reputation: 1043

.css transform not applying with jquery

I'm trying to play with mouse events in javascripts and ran into an issue.

I took this example : http://jsfiddle.net/vL5g3/1/ to understand how it works and later have tried to apply it in a transform case.

While I knew the result would mostlikely fail I at least expected that something would happen but nothing is happenning. Isn't is possible to apply css transform with jquery ?

Here is the code :

http://jsfiddle.net/pool4/Bbcp2/1/

var x=0, 
    y=0,
    rate=0,
    maxspeed=10;
var cont= $('.container');

$(cont).mousemove(function(e){
    var $this = $(this);
    var w = $this.width();
    rate = -(e.pageX - $(this).offset().left + 1)/w;
});

cont.hover(
    function(){
        var scroller = setInterval( moveCont, 30 );
        $(this).data('scroller', scroller);
    },
    function(){
        var scroller = $(this).data('scroller');
        clearInterval( scroller );
    }
);   

function moveCont(){
    x += maxspeed * rate;
    var newpos = 'translate('+x+'px, '+y+'px)';
    $('.transform').css('-webkit-transform',newpos);
}

Upvotes: 0

Views: 183

Answers (1)

Md Mahmudul Haque Fahim
Md Mahmudul Haque Fahim

Reputation: 283

add at the end of moveCont

   $('.transform').css('-moz-transform',newpos);

for mozilla hope it will work and your fiddle load jquery library.

Upvotes: 1

Related Questions