jquery animate with translate y 和 fadeIn

Question

放在悬停事件中

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

最初我将元素的不透明度设置为零，我认为它可以实现淡入和平移效果？但它不起作用，它看起来就像那样，它没有滑下或褪色..

Answer 1

对于找到这篇文章的下一个人......使用 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");
    }
);