JQuery : 스크롤링 애니메이션 문제

"C1"에서 "C9"로 설정된 9 개의 블록을 사용하여 위쪽에 도달 할 때까지 위쪽으로 스크롤 한 다음 위쪽에 도달 할 때까지 스크롤 한 두 개의 JQuery 함수를 작성했습니다. 맨 위로 돌아가서 다시 시작해야합니다. 이상한 것은 모든 것이 엉망이 될 때까지 블록이 더 커지는 간격을두고 시작할 때마다입니다. JQuery를 처음 접했을 때 나는 어떻게해야하는지에 대한 도움이나 더 나은 아이디어에 감사 할 것입니다. 이 코드 경우 : GoUp() 함수를 한 번 호출되는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

게시물을 편집하고 HTML을 추가했습니다. – Auxiliary

.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 : 스크롤링 애니메이션 문제

답변

관련 문제