2

我不擅长 jQuery 语法，因为我喜欢 PHP。

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

我想要得到的是这样的：

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

IE。我想在动画样式列表中包含供应商前缀，但出现语法错误 - 意外标记。

我试过使用 var transformProperty = Modernizr.prefixed 吗？Modernizr.prefixed('transform') : 'transform'; 但它只允许列出一种样式，即： $(".rightbox3d").animate(transformProperty,"translateY(-200px)"); 当我想要的是变换、不透明度、缩放等多种样式时。

我注意到那行代码在 transformProperty 部分周围没有大括号，而列表则有。$('.rightbox3d').animate({ opacity: 1 ,top:"-200px" }, 4000, function() { // 动画完成。});

但我就是无法理解它。任何人都可以帮忙吗？

4

1 回答 1

1

所以，你将不得不做出一个大的飞跃。CSS 过渡不同于 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'
  });
}

我认为这应该为您解决问题。:)

于 2013-10-18T21:34:03.713 回答