javascript - 延迟和淡入平滑重置表单功能

Question

我刚刚发现了联系表单中所有字段的重置功能。我希望该功能在几秒钟后应用并平滑淡入。

这是我用于重置的代码，以便用户可以再次发送电子邮件:

$( 'form' ).each(function(){
    this.reset();
});

我想也许这样的事情是可能的？也许我还需要添加实际插入内容的淡出功能？但目前我还不是 jQuery 专家:

var formReset = $( 'form' ).each(function(){this.reset();});

formReset().delay('2000').fadeIn('500');

Answer 1

尝试在 fadeIn/fadeOut 回调中使用重置。

以下代码片段将淡出所有类型为文本和文本区域的输入。此后，值被清除并且元素淡入:

function reset(){
    $('#myFormular').children('input:text, textarea').each(function(){
        $(this).fadeOut('slow', function(){
            $(this).val('');
            $(this).fadeIn('slow');
        });
    });
}


$('#resetButton').click(reset);

示例:http://jsfiddle.net/WsDe2/2/

另一个解决方案是将字体颜色设置为输入元素的背景颜色。然后清除该值，然后更改为原生颜色:

function reset(){
    $('#myFormular').children('input:text, textarea').each(function(){
        var baseColor = $(this).css('color');

        $(this).animate({color : $(this).css('background-color')}, function(){
            $(this).val('');
            $(this).css('color', baseColor);
        });
    });
}


$('#resetButton').click(reset);

示例:http://jsfiddle.net/WsDe2/4/