I can't in the life create this to loop right before the image leaves the screen. For some reason it has to fully leave the screen, then it starts over. Can someone shed some light on this for me. I'm new to jquery. Thank you.Below is my code:\[code\]<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>new slider</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript">$(document).ready(function() { function animateMe(el, startStyle, endStyle, duration, repeat){ timeouts.push(setTimeout(function(){animateMe(el, startStyle, endStyle, duration, repeat);}, repeat)); el.css(startStyle); el.animate(endStyle, duration, 'linear'); } function animateTwoWay(el, startStyle, endStyle, duration, pause){ rep = pause*2 + duration*2 timeouts.push(setTimeout(function(){animateTwoWay(el, startStyle, endStyle, duration, pause);}, rep)); el.css(startStyle); el.animate(endStyle, duration, 'linear').delay(pause); el.animate(startStyle, duration, 'linear').delay(pause); } function startAnimation(){ animateMe($('#note_holder'),{left: w}, {left: -2102}, 5000, 5300); } var t1, t2; var timeouts = []; var w = $(document).width() var animationStatus = $.cookie('animationStatus'); startAnimation(); });(function(e,f,b){var d=/\+/g;function g(j){return j}function h(j){return c(decodeURIComponent(j.replace(d," ")))}function c(j){if(j.indexOf('"')===0){j=j.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\")}return j}function i(j){return a.json?JSON.parse(j):j}var a=e.cookie=function(r,q,w){if(q!==b){w=e.extend({},a.defaults,w);if(q===null){w.expires=-1}if(typeof w.expires==="number"){var s=w.expires,v=w.expires=new Date();v.setDate(v.getDate()+s)}q=a.json?JSON.stringify(q):String(q);return(f.cookie=[encodeURIComponent(r),"=",a.raw?q:encodeURIComponent(q),w.expires?"; expires="+w.expires.toUTCString():"",w.path?"; path="+w.path:"",w.domain?"; domain="+w.domain:"",w.secure?"; secure":""].join(""))}var j=a.raw?g:h;var u=f.cookie.split("; ");var x=r?null:{};for(var p=0,n=u.length;p<n;p++){var o=u[p].split("=");var k=j(o.shift());var m=j(o.join("="));if(r&&r===k){x=i(m);break}if(!r){x[k]=i(m)}}return x};a.defaults={};e.removeCookie=function(k,j){if(e.cookie(k)!==null){e.cookie(k,null,j);return true}return false}})(jQuery,document);</script><style type="text/css">body{ margin:0; padding:0; text-align:center; overflow-x:hidden;}#wrap{ width:1280px; min-height:500px; text-align:left; margin-top: 50px; margin-right: auto; margin-left: auto; margin-bottom: 50px; height: 453px;}.container{ width:1280px; min-height:300px; float:left; height: 453px; background-image: url(images/girl.jpg); background-repeat: no-repeat; position:relative;}.display_holder_1{ width:980px; height:350px; float:left; /*overflow-x:hidden;*/}#note_holder{ width:2102px; height:232px; position:relative; top:95px; left: 50%; margin-left: -902px; background-repeat: no-repeat; background-image: url(images/notes.png);}</style></head><body><div id="wrap"> <div class="container"> <div class="display_holder_1"> <div id="note_holder"></div> </div> </div></div></body></html>\[/code\]
How to create a continuous loop animation with jquery?
- Thread starter layereurA
- Start date