gpt4 book ai didi

javascript - 在 jQuery .animate 中使用 Modernizr.prefixed

转载 作者:行者123 更新时间:2023-11-30 05:46:32 24 4
gpt4 key购买 nike

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

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

我想得到的是这样的:

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

即。我想在动画样式列表中包含 vendor 前缀,但出现语法错误 - 意外标记。

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

我注意到那行代码在 transformProperty 部分周围没有大括号,而列表有例如。$('.rightbox3d').animate({ 不透明度:1 ,顶部:“-200px” }, 4000, 函数() { //动画完成。 });

但我只是无法理解它。谁能帮忙?

最佳答案

因此,您将不得不大跃进。 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'
});
}

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

关于javascript - 在 jQuery .animate 中使用 Modernizr.prefixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17652791/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com