JQuery backstretch image auto-move and back

Question

I use backstretch on my website. Now you can automatically move backgroudn from left to right and back. But now he just moves in one direction. I watch the continuous cycle of this moving image.

How can I reset / go back image

backstretch.js: http://dev.disaster-kfw.com/fileadmin/template/js/slidebackground.js

some more javascript to move and initialize

var images = ['fileadmin/template/gfx/background02-03.jpg']; jQuery.backstretch( images[Math.floor(Math.random() * images.length)] ); jQuery(function($){ (function swoop(element) { element .animate({'margin-left':'-=5px'}, 100, function(){ setTimeout(function(){ swoop(element); }, 0); }); })($('#backstretch img')); }); 

leading to this HTML output

 <div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow: hidden; z-index: -999999; margin: 0px; padding: 0px; height: 100%; width: 100%;"><img src="fileadmin/template/gfx/background02-03.jpg" style="position: absolute; margin: 0px 0px 0px -3404.98890491151px; padding: 0px; border: none; z-index: -999999; width: 3006px; height: 835px; left: -551.5px; top: 0px;"></div> 

Sorry for sending the html code a little ugly, dunno to do it right ...

EDIT:

Thank you very much, but I think that is not what I need.

I think I need to calculate the width of the image and the margin on the left to switch from moving left to right and right.

So, I tried to calculate the width of my image, but

 iWidth = jQuery("#backstretch img").width(); 

always null.

and

 iWidth = $("#backstretch img").width(); 

breaks all javascript.

I thought it might be a solution to write a second function called backswoop to count the left edge. And then fulfill the margin condition on the left and image width.

 iWidth = jQuery('#backstretch img').width(); jQuery(function($){ (function swoop(element) { element.animate({'margin-left':'-=5px'}, 50, function(){ setTimeout(function(){ if(element.css('margin-left')*-1 <= iWidth){ swoop(element); }else{ backswoop(element); } }, 0); }); })($('#backstretch img')); (function backswoop(element) { element.animate({'margin-left':'+=5px'}, 50, function(){ setTimeout(function(){ if(element.css('margin-left') >= 0){ swoop(element); }else{ backswoop(element); } }, 0); }); })($('#backstretch img')); }); 

But since I am not very versed in javascript, this does not work: - (

Answer 1

Before moving an element, use jQuery .data() to store the original field. That way, when you want to reset, you can animate the margin to this value.

This code is not perfect. This is just to give you an idea of ​​what you can do.

 //I would avoid global variables, but I don't know enough of your code. swoopingElement = $('#backstretch img'); swoopingElement.data("startingmargin", $('#backstretch img').css('marginLeft')); (function swoop(element) { element .animate({'margin-left':'-=5px'}, 100, function(){ swoopingElement.data("timer", setTimeout(function(){ swoop(element); }, 0)); }); })($('#backstretch img')); function resetElement(element){ //First shut down any remaining animation element.stop(); clearTimeout(element.data("timer")); //even though it zero... it might be active. //Send element back element.animate({'margin-left':element.data("startingmargin")}, 100); //Or for instant return. // element.css({'margin-left':element.data("startingmargin")}); }; 

https://api.jquery.com/jquery.data/