Question

我无法在生活中创建这个在图像离开屏幕之前循环。由于某种原因，它必须完全离开屏幕，然后重新开始。有人可以为我阐明这一点。我是jquery的新手。谢谢。

以下是我的代码：

<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>

如何使用jquery创建连续循环动画？

0 个答案: