javascript - 在 JS 中添加幻灯片动画

Question

如何通过验证向我的联系表单添加淡入淡出动画？我不想使用 CSS 过渡。我只是不确定在下面的代码中将 fadeIn 放在哪里：

$('#message').focusout(function() {
    if (!$(this).val())
        $(this).addClass('error').parent().find('mark').removeClass('valid').addClass('error');
    else
        $(this).removeClass('error').parent().find('mark').removeClass('error').addClass('valid');
});

Answer 1

假设您要实现淡入动画，用于验证输入字段，并且您还需要验证用户何时离开焦点。

你的方法是正确的

您可以按照此 SO 发布在此处淡入淡出添加或删除类

我测试了你在评论中发布的 Jsfiddle，focusout 在这种情况下不起作用，你必须使用 onblur

而且你不能在这里使用 jquery addclsss 你必须使用JqueryUI addClass和removeClass API 来实现类更改期间的动画

当然，有一些 hacks 使用，您可以在没有 Jquery UI 的情况下实现这一目标，但这仍然是经过测试的方法并且很容易实现。