jQuery: Besoin d'aide .. La fonction de rappel de .animate ne fonctionne pas

Je veux avoir une sorte d'effet de rebond dans mon plugin d'animation mais cela ne fonctionne pas. Le rappel n'est pas appelé à tous:jQuery: Besoin d'aide .. La fonction de rappel de .animate ne fonctionne pas

$(function() { 
    var offset = $("#first").offset(); 
    var position = $(window).scrollTop(); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll>position) { 
     $("body") 
      .animate({ 
      scrollTop: offset.top + $("#first").innerHeight() + 150 
      }, 
      1000, 
      "easeInOutQuart", 
      function() { 
      $("body").animate({ 
       scrollTop: offset.top - 150 
      }, 
      1000, 
      "easeOutBounce" 
      ) 
      }) 
     } 
    }) 
    })

Ok .. Voici mon code HTML .. Je ne sais pas pourquoi le vôtre travaille beaucoup .. Mais le mien est pas .. Le $ (« html ») ISN « t de travail, mais le vôtre fonctionne très bien ..

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title>Bounce Test Pad</title> 
<link rel=stylesheet href="index.css" type= "text/css" /> 
<script type="text/javascript" src ="jquery-1.3.2.js"></script> 
<script type = "text/javascript" src="jquery.easing.1.3.js"></script> 
</head> 
<body> 
    <img id="lightbulb" src = "img/veioza.png"> 
    <div id="wrapper"> 
     <img id="first" class="images" src="img/nike.jpg" /> 
     <img id ="second" class = "images" src="img/golden.jpg" /> 
     <img id = "third" class ="images" src ="img/a.jpg" /> 
    </div> 
<script type="text/javascript"> 
    $(window).resize(function() { 
     centerIt(); 
    }); 
    $(function() { 
     centerIt(); 
    }) 
    function centerIt() { 
     var viewportWidthSize = window.innerWidth; 
     var pixels = (viewportWidthSize/2) - $("#first").width()/2; 
     $("#wrapper img").css("left", pixels); 
    }; 


    $(function() { 
     var offset = $("#first").offset(); 
     var prevpos = $(window).scrollTop(); 
     var animating = false; 
     $(window).scroll(function() { 
      var curpos = $(window).scrollTop(); 
      if (curpos>prevpos && !animating) { 
       $('html').animate(
         {scrollTop: offset.top + $("#first").height()}, 
         1000, 
         "easeInOutQuart" 
        ) 
      } 
      animating = true; 
     }) 
    }) 
</script> 
</body> 
</html>

Source

2009-05-03 Keira Nighly

Essayez de vérifier qu'il n'est pas appelé en mettant une alerte ou un fichier console.log dedans. –

Salut Pim, J'ai essayé de mettre une alerte dans la fonction de rappel. L'alerte a été appelée non-stop. Il apparaît juste alerte non stop –

AnhTu a raison à propos de l'animation qui élève l'événement scroll.

Voici une démonstration fixe: http://jsbin.com/alede (Vous pouvez modifier la démo ici: http://jsbin.com/alede/edit)

Vous devez ajouter du code pour empêcher la ré-animation tandis que l'animation est toujours en cours:

var status = $('#status'); 
var offset = $("#downcontent").offset(); 
var height = $("#downcontent").height(); 
var animating = false; 
var prevpos = $(window).scrollTop(); 

$(window).scroll(function(){ 
    var curpos = $(window).scrollTop(); 
    if (curpos > prevpos && !animating) { 
    $('html').animate(
     {scrollTop: offset.top + height}, 
     1000, 
     "easeInOutQuart", 
     function(){ 
     $('html').animate(
      {scrollTop: offset.top}, 
      1000, 
      "easeOutBounce", 
      function(){ 
      animating = false; 
      status.html('Both animations finished.<br />'); 
      } 
     ); 
     status.html('First animation finished.<br />Second animation started<br />'); 
     } 
    ); 
    animating = true; 
    status.html('First animation started<br />'); 
    } 
    prevpos = curpos; 
});

Modifier

Ok, j'ai créé une autre démo avec votre code HTML. J'ai corrigé un peu le JavaScript et ajouté quelques règles CSS: http://jsbin.com/oqapa

Source

2009-05-03 13:12:18 brianpeiris

Merci, j'ai essayé, mais le $ ("html") ne fonctionne pas. Merci pour les conseils si. Je peux l'utiliser pour résoudre mon problème –

De rien. Vous devrez nous montrer votre code HTML si vous avez besoin de plus d'aide. – brianpeiris

Je veux poser une question stupide. La commande $ ('html') fonctionne-t-elle uniquement en mode en ligne? Je veux dire, ça ne marchera pas dans le répertoire local? Parce que je crois que nous avons le même code, mais il ne fonctionne pas dans mon répertoire local .. –

le faire sans utiliser le rappel

if (scroll>position) { 
    $("body") 
     .animate({ 
     scrollTop: offset.top + $("#first").innerHeight() + 150 
     },1000,"easeInOutQuart") 
     .animate({ 
     scrollTop: offset.top - 150 
     },1000,"easeOutBounce") 
    }) 
}

mais je pense que vous Hava de se lier à un autre événement. Parce que lorsque vous animez un corps, cela peut déclencher l'événement window.scroll

Source

2009-05-03 11:40:38 AnhTu

jQuery: Besoin d'aide .. La fonction de rappel de .animate ne fonctionne pas

Répondre

Questions connexes