jquery使用translate y和fadeIn设置动画

置于悬停事件中

$('.text-warning').css('opacity',1);
$('.text-warning').css('transition','opacity 0.2s ease-out');
$('.text-warning').css('transform','translateY(20px)');

最初我将元素设置为不透明度零，我认为它可以实现fadeIn和translate效果？但它不起作用，它看起来就像那样，它不是滑下或褪色

.css（）

不适用于动画过渡。您正在查找的函数是

.animate（）

试试这个

$( ".text-warning" ).animate({
    opacity: 1,
    transition: "opacity 0.2s ease-out",
    transform: "translateY(20px)"
}, 1500 );

---

下一个找到这篇文章的人。。。一个使用CSS的答案

首先——如上所述，上面描述的.css方法不起作用——忘记它，不要浪费时间。 下一步-创建一个描述要添加的动画属性的类。将它放在CSS文件中

.text-warning-anim {
    opacity: 1;
    transform: translateY(20px);
    transition: opacity 0.2s ease-out, transform 0.2s;
}

现在-当事件激发时，使用addClass（）将该类添加到对象中。它将充满活力。这也适用于关键帧。我是jQuery新手，但这对我来说很有效（经过测试，大量使用）。在您的示例中，类似以下内容：

$(".text-warning").hover (
    function() {
        $(this).addClass("text-warning-anim");
    },
    function() {
        $(this).removeClass("text-warning-anim");
    }
);

---

我相信发问者想利用CSS3转换，而不是基于JS的动画。@FrédéricHamidi，这一点在最初的问题中没有明确说明。他在jQuery动画和悬停事件的上下文中提出了这个问题，所以我给了他一个使用jQuery的解决方案。不过，我同意最好使用CSS3转换。@user3836151我知道

.css（）

函数支持CSS3。问题是它不支持过渡或动画。

.animate（）

函数的全部要点是在一段时间内“tween”CSS属性。请参阅此提琴：您需要添加

，将0.2s

转换为transition属性。动画需要知道它的持续时间有多长，并且必须显式键入。动画声明之间还需要有一个逗号。；）

$(".text-warning").hover (
    function() {
        $(this).addClass("text-warning-anim");
    },
    function() {
        $(this).removeClass("text-warning-anim");
    }
);