views:

890

answers:

2

Hi, I want to have some kind of bounce effect in my animation plugin but it isn't working. The callback isn't called at all:

$(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"
            )
          })
      }
    })
  })

Okay.. Here's my HTML code.. I dont know why yours is working great.. But mine isn't.. The $('html') isn't working but yours is working fine..

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

do it without using callback

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

but i think you hava to bind to an other event. Because when you animate body, it may raise the event window.scroll

AnhTu
+3  A: 

AnhTu is right about the animation raising the scroll event.

Here's a fixed demo: http://jsbin.com/alede (You can edit the demo here: http://jsbin.com/alede/edit)

You have to add code to prevent re-animating while the animation is still occurring:

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;
});

Edit

Okay, I've created another demo with your HTML code. I fixed the JavaScript a little and added some CSS rules: http://jsbin.com/oqapa

brianpeiris
Thanks, I tried that, but the $("html") isn't working. Thanks for the tips though. I can use it to solve my problem
Keira Nighly
You're welcome. You'll have to show us your HTML code if you need more help.
brianpeiris
I want to ask a silly question. Is the $('html') command only works in online mode? I mean won't it work in local directory? Because I believe we have the same code, but it isn't working in my local directory..
Keira Nighly
It should work from your local directory as well. I'm guessing it's the CSS. Both my examples have worked for you right? It must be the CSS.
brianpeiris
Yeah, I think its my local directory/html/css problem.. Because I uploaded it to jsbin and it worked.. Wow, you solve this problem in just minutes? You're super..I've been working with this for the whole day... And I'm still not yet finish.. :(
Keira Nighly
:) Thanks. I'm sure you'll figure it out eventually, just got to keep at it. Good luck!
brianpeiris