jQuery Animate和“ easeOutBounce”的问题

Question

I was hoping someone could help me with the following script:

jQuery(document).ready(function($) {
  $(".infoBoxBtn a").click(function(e){
      e.preventDefault();
      $("#info-box").animate({marginTop: '67px'}, 2000, 'easeOutBounce');

      $(".infoBoxBtn a").addClass("active");
  });

  $(".infoBoxBtn a.active").click(function(e){
      e.preventDefault();
      $("#info-box").animate({marginTop: '-434px'}, 2000, 'easeOutBounce');

      $(".infoBoxBtn a").removeClass("active");
  });

});//end

This is the error I get in Safari:

TypeError: 'undefined' is not a function (evaluating 'f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration)')

I have read the article about jQuery Animate on the jQuery API site, and I don't know what I'm doing wrong here.

Thanks! :)

Answer 1

Regarding your original answer - You need to load the jQuery UI effects library.

About the closing animating, I would refactor your code to check each time the anchor is clicked to check the current status.

Consider this code:

$(function() {
  $('.infoBoxBtn a').on('click', function (e) {
    e.preventDefault();
    t = $(this);
    if (t.hasClass('active')) {
      margin_top = '-434px';
    }
    else {
      margin_top = '67px';
    }

    $('#info-box').stop(true, true).animate({ marginTop : margin_top }, 2000, 'easeOutBounce');
    t.toggleClass('active');
  });
});

Couple of things I changed:

• Used .on() instead of bind()/click()
• Used .hasClass() and .toggleClass()
• Used .stop() to clear your previous animating and jump to the end.