Question

我不熟悉jQuery语法，因为PHP是我的事。

我正在尝试制作一个jQuery动画，但是在多个值上使用了正确的供应商前缀，但是我对Modernizr.prefixed用法的理解让我感到失望。

我想要的是：

    $('.rightbox3d').animate({
        opacity: 1
        ,top:"60px"
        ,Modernizr.prefixed('transform'):"translateY(-200px)"
        ,Modernizr.prefixed('scale'):2
    }, 4000);

即。我想在动画样式列表中包含供应商前缀，但我得到语法错误 - 意外令牌。

我尝试过使用过 var transformProperty = Modernizr.prefixed？ Modernizr.prefixed（'transform'）：'transform'; 但它只允许列出一种风格即：$（“。rightbox3d”）。animate（transformProperty，“translateY（-200px）”）; 当我想要的是多种风格，如变换，不透明度，比例等。

我注意到这行代码在transformProperty部分周围没有括号括号，而列表则有例如。 $（ 'rightbox3d'）。动画（{ 不透明度：1 ，顶部： “ - 200像素” }，4000，function（）{ //动画完成 }）;

但我无法理解它。有人可以帮忙吗？

Answer 1

所以，你将不得不进行一次大跃进。 CSS Transitions与jQuery.animate不同。

这是一个很好的介绍。 https://www.webkit.org/blog/138/

所以，首先让我们认识到我们不能再做同样的事了

if (!Modernizr.csstransitions || Modernizr.csstransforms3d) {
   // use some css
} else {
   // use some jQuery
}

现在，让我们用你的例子填写

if (!Modernizr.csstransitions || !Modernizr.csstransforms3d) {
  // Old jQuery version
  $('.rightbox3d').animate({
    opacity: 1,
    top: "-200px",
    width: 2 * $('.rightbox3d').width(),
    height: 2 * $('.rightbox3d').height()
  }, 4000);
} else {
  // Modern cool version
  // The transform is moving/rotating/stretching we want to do
  // The transition is the animation we want
  $('.rightbox3d').css({
    opacity: 1,
    transform: 'translateY(-200px) scale(2)',
    transition: 'all 4000ms ease-in-out'
  });
}

我认为应该为你清理它。：）

在jQuery .animate中使用Modernizr.prefixed

1 个答案: