JQuery: problème d'animation de défilement

J'ai écrit ces 2 fonctions JQuery censées prendre 9 blocs avec des ID de "C1" à "C9" et les faire défiler vers le haut jusqu'à ce qu'ils atteignent le sommet, puis chaque bloc qui atteint le top devrait revenir en arrière et recommencer. La chose étrange est que chaque fois qu'ils commencent sur l'espace entre les blocs devient plus grand jusqu'à ce que tout se foiré. Je suis nouveau à JQuery et j'apprécierais n'importe quelle aide ou même de meilleures idées sur comment je devrais faire ceci. Voici le code:JQuery: problème d'animation de défilement

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

La fonction GoUp() est appelée une fois et qui est quand la page se charge. Dois-je utiliser le plugin Cycle pour un tel effet? Merci d'avance.

Source

2010-08-13 Auxiliary

veuillez également publier votre code HTML. – Catfish

J'ai modifié le post et ajouté le HTML – Auxiliary

Il devrait être plus facile avec position absolue sur la classe .content (de cette façon les positions sur l'écran sont plus cohérentes et ne dépendent pas l'une de l'autre parmi les éléments div.content, donc je vous suggère de mettre à jour votre CSS en conséquence), puis les modifications suivantes dans la 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>

et enfin supprimer onload de l'étiquette body.

Source

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>

Source

2013-05-04 15:47:27

JQuery: problème d'animation de défilement

Répondre

Questions connexes