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 effects库。

关于结束动画，我会重构您的代码，以便在每次点击锚点时检查以检查当前状态。

考虑以下代码：

$(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()清除之前的动画并跳到最后。

jQuery Animate和“easeOutBounce”的问题

1 个答案: