jQuery Animate和"easeOutBounce"的问题

Question

我希望有人可以帮助我使用以下脚本:

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

这是我在Safari中遇到的错误:

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

我在jQuery API网站上读过关于jQuery Animate的文章,我不知道我在这里做错了什么.

谢谢!:)

Answer 1

关于您的原始答案 - 您需要加载jQuery UI效果库.

关于结束动画,我会重构您的代码以检查每次单击锚点以检查当前状态.

考虑以下代码:

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

我改变了一些事情:

• 使用.on()而不是bind()/ click()
• 使用.hasClass()和.toggleClass()
• 使用.stop()清除以前的动画并跳转到最后.