Question

放入悬停事件

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

最初我将元素设置为不透明度为零，我认为它可以执行fadeIn和translate效果？但它不起作用，就像那样，它没有滑落或褪色..

Answer 1

对于找到这篇文章的下一个人...使用CSS的答案！

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

wkhtmltopdf -V

现在 - 当事件触发时，使用addClass（）将此类添加到对象中。它会动画。这也适用于关键帧。我是jQuery的新手，但这对我有用（经过测试，大量使用）。在您的示例中，如下所示：

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

Answer 2

试试这个！

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

Answer 3

.css()不适用于动画过渡。您要查找的功能是.animate()。

http://jsfiddle.net/LimitedWard/U4JZ6/1/

$('.text-warning').hover(
    function() {
        $(this).animate({
            ...
        });
    },
    function() {
        $(this).animate({
            ...
        });
    }
);

http://api.jquery.com/animate/

jquery animate with translate y和fadeIn

3 个答案: