jquery文本框呈现跳动的输入动画特效

使用方法

$(document).on('keypress', '.motion_field', function(e) {
	var _this = $(this);
	if (e.keyCode != 13) {
		var str = String.fromCharCode(e.keyCode);
		$(_this).find('input').val($(_this).find('input').val() + str);
		$(_this).append('<b class=new_char>' + str + '</b>');
		if ($(_this).hasClass('password')) {
			$(_this).find('b:not(:last-of-type)').replaceWith('<b>*</b>').delay(400).queue(function() {
				$(_this).find('b:last-of-type').addClass('hide_char').delay(400).queue(function() {
					$(_this).find('b.hide_char').removeClass('hide_char').addClass('hided_char').html('*');
				});
			});
		}
	}
});

$(document).on('keydown', '.motion_field', function(e) {
	if (e.keyCode == 8 || e.keyCode == 46) {
		e.preventDefault();
		var _this = $(this);
		$(_this).find('b:last-of-type').addClass('hide_char remove_char');
		setTimeout(function() {
			$(_this).children('b:last-of-type').remove();
		}, 200);
		$(_this).find('input').val($(_this).find('input').val().slice(0, -1));
	}
});