JQuery：滚动动画问题

我已经写了2个JQuery函数，它们应该将9个ID从“C1”设置为“C9”的块并向上滚动，直到它们到达顶部，然后每个块到达顶部应该回去并重新开始。奇怪的是每次他们开始时，块之间的空间变得更大，直到一切都变得混乱。我是JQuery的新手，我很感谢任何帮助，甚至更好的想法，我应该如何做到这一点。这是代码：JQuery：滚动动画问题

<html> 
    <head> 
     <title>Some JQuery Practice</title> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
     <link rel="stylesheet" href="style1.css" type="text/css"> 
     <style> 
      #BOX{ 
       position:absolute; 
       width:700px; 
       height:200px; 
       top:100px; 
       overflow:hidden; 
       background-color:#D3C79D; 
       -moz-border-radius:30px; 
      } 
      .content{ 

       font-family:Tahoma; 
       font-size: 11px; 
       position:relative; 
       width:660px; 
       top:200px; 
      } 
     </style> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <script> 
      function OneGoesUp(target){ 
       if(target.position().top == 0){ 
        target.css({"top":"270"}); 
       } 
       target.animate({ 
        "top": "-=1" 
       }, 10, function(){OneGoesUp(target)}); 
      } 
      function GoUp(){ 
       for(var i=1;i<10;i++){ 
        var str = "#c"; 
        str += i; 
        $(str).text(str); 
        OneGoesUp($(str)); 
       } 
      } 
     </script> 
    </head> 
    <body onload="GoUp();"> 
     <div id="BOX"> 
     <div id="c1" class="content"><p>Lorem ipsum</p></div> 
     <div id="c2" class="content"><p>Lorem ipsum</p></div> 
     <div id="c3" class="content"><p>Lorem ipsum</p></div> 
     <div id="c4" class="content"><p>Lorem ipsum</p></div> 
     <div id="c5" class="content"><p>Lorem ipsum</p></div> 
     <div id="c6" class="content"><p>Lorem ipsum</p></div> 
     <div id="c7" class="content"><p>Lorem ipsum</p></div> 
     <div id="c8" class="content"><p>Lorem ipsum</p></div> 
     <div id="c9" class="content"><p>ghghjghjghj</p></div> 
     </div> 

    </body> 
</html>

的党团（）函数被调用一次，那是在页面加载时。我是否必须使用Cycle插件来获得这样的效果？在此先感谢。

来源

2010-08-13 Auxiliary

请张贴您的html以及。 – Catfish 2010-08-13 21:11:05

我编辑了帖子并添加了HTML – Auxiliary 2010-08-13 21:21:22

它应该更容易与绝对位置上.content类（这种方式在屏幕上的位置更一致，并不相互依赖于div.content元素之一，所以我建议你更新你的CSS相应的），然后在JS以下修改：

<script type="text/javascript"> 
$(document).ready(
    function(){ 
     $('.content').each(function(i){ 
      $(this).text($(this).attr('id')); 
      $(this).css('top', 15*i + 'px'); //initial position, Y-space of 15px beteween each div 
      OneGoesUp($(this)); 
     }); 
    } 
); 

function OneGoesUp(target){ 
    if(parseInt(target.css('top')) == 0){ 
     target.css({'top':'270px'}); 
    } 
    target.animate({ 
     "top": "-=1" 
    }, 10, function(){OneGoesUp(target)}); 
} 
</script>

终于从body标签去除onload。

来源

2010-08-13 21:53:08 darma

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Smooth Scrolling</title> 
    <style type="text/css"> 
     .container{ 
      width:300px; 
      margin:0 auto; 
        } 
     .section{ 
      margin-top:60px; 
       } 
    .navigation{ 
     position: fixed; 
     background:white; 
     padding:20px 20px; 
     width:100%; 
     margin-top:0px; 
     top:0px; 
    } 
</style> 
</head> 
<body> 
<div class="container"> 
<div class="navigation"> 
    <a href="#html">HTML</a> 
    <a href="#javascript">JavaScript</a> 
    <a href="#jquery">jQuery</a> 
    <a href="#php">PHP</a> 
    <a href="#css">CSS</a> 
</div> 
<div class="section"> 
    <h1 id="html">HTML</h1> 
      <p> 
      put your text about html here 


      </p> 
</div> 
<div class="section"> 
    <h1 id="javascript">JavaScript</h1> 
    <p> 
      put your javascript details here. 
      </p> 
</div> 
<div class="section"> 
    <h1 id="jquery">jQuery</h1> 
    <p> 
      Put your details about javascript here 
      </p> 

</div> 
<div class="section"> 
    <h1 id="php">PHP</h1> 
    <p> 
      put your details about php here 
      </p> 

</div> 
<div class="section"> 
    <h1 id="css">CSS</h1> 
    <p>put your details </p> 

</div>  
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('a[href^="#"]').click(function(event) { 
     var id = $(this).attr("href"); 
     var offset = 60; 
     var target = $(id).offset().top - offset; 

     $('html, body').animate({scrollTop:target}, 3000); 
     event.preventDefault(); 
    }); 
}); 
</script> 
</body> 
</html>

来源

2013-05-04 15:47:27

JQuery：滚动动画问题

回答

相关问题