jQuery Forum

Hello guys,

I use the wonderful .animate() method to create a "parallax website". It's still in developpement, but you can see the result : www.ohnewgarden.fr

My problem :
When you are at the very right, the animate effect reset my left property before animating. Which is weird is that this "reset" is applied only to two layers, without any sense. I'm going crazy !

So if someone could help me, it will be very nice ! It's probably my code which is wrong, but I can't see the mistake.

My code (which makes the layers move) :

1. /**
                    * Positionnement des calques
                    */
                   var positionmax = largeurmax - $parallaxwrapper.width();
                   var positionLayers = function(value,animated) {
                       var position = (value > positionmax ? positionmax : (value < 0 ? 0 : value));
                       var percentpos = position / positionmax;
                       $parallax.find('.layer').each(function() {
                           var $this = $(this);
                           var futurepos = -1 * Math.round(($this.width()-$parallaxwrapper.width())*percentpos);
                           var actualpos = $this.position().left;
                               var diff = actualpos - futurepos;
                               if(diff < 0)
                                   var str = '+='+Math.abs(diff);
                               else
                                   var str = '-='+Math.abs(diff);
                           if(animated) {
                               $this.stop(true,true).css({
                                   left:actualpos+'px'
                               });
                               $this.animate({
                                   left:str
                               },{
                                   duration: options.moveDuration,
                                   queue: false
                               });
                           }
                           else {
                               $(this).css({
                                   left:futurepos+'px'
                               });
                           }
                       });
                   };

I said for my defense, I have tried to remove .stop(), tried to change parameters of .stop(), tried to reset (like there) the left property with a .css() method, and I have also tried to animate with "+=" (like there), but nothing works.

If you follow to the link I gave, you could see very easily by clicking on "Contact" and after animation by clicking on "Accueil"...

Thanks a lot.