Question

我正在使用keyup函数验证一些文本输入，并且我想在认为该框被验证时运行复选标记的动画。

问题是，只要我点击任何输入，动画就会启动。如果您在单击后立即键入一次，您将看到动画发生。我假设动画开始是因为我在keyup上添加了这个类，在你释放鼠标点击它之后基本上会触发它。还有另外一种方法吗？

我在测试时将时间增加到5秒
为什么它会触发所有3个动画，因为我正在使用each和next函数。
有没有办法让动画从keyup开始。

我的代码的要点如下，请在此处查看实时版本：http://jsfiddle.net/MhMCz/26/

$(':input').each(function(){
   var values = $(this).attr('value');

   $(this).keyup(function(){
      if( $(this).val() !== '' && $(this).val() !== values) {
        $(this).addClass('animated');
        $(this).next('span').html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />");
    }
    else {
       $(this).removeClass('animated'); 
       $(this).next('span').html('');     
    }                
   });

   if ( $(this).next('span').hasClass('animated') ) { }
   else {
      $(this).next('span').animate({
           marginLeft: '10px'
        }, 5000, function(){
           alert("animation complete")
   });   
}
)};

Answer 1

我重新构建了一些代码，可以进行更多优化，但看起来很不错：

http://jsfiddle.net/MhMCz/30/

$('form').on('focus focusin blur focusout keyup', ':input', function(e) {
    var val = this.value,
        def = this.defaultValue,
        $t = $(this),
        $check = $t.next('span');

    switch(e.type){
        case 'focus':
        case 'focusin':
            if( val == def ) {
               this.value = '';
               $t.addClass('active');
            }
        break;
        case 'blur':
        case 'focusout':
            if(val == '') this.value = def;
            $t.removeClass('active');
        break;
        case 'keyup':
            if(val != '' && val != def) {
                $check.animate({
                    opacity: 1,
                    'margin-left': '10px'
                }, 'fast');
            } else {
               $check.animate({
                    opacity: 0,
                    'margin-left': '100px'
               }, 'fast');   
            }
        break;
    }
});

来自“表单”的事件委托只是为了表现，请参阅http://jsperf.com/jquery-live-vs-delegate-vs-on/4。

Answer 2

您可以尝试：

<input type="text" id="name" value="Name" class="validate_me" valid_compare="Name" /><span></span><br />
<input type="email" id="email" value="Email" class="validate_me" valid_compare="Email" /><span></span><br />
<input type="phone" id="phone" value="Phone" class="validate_me" valid_compare="Phone" /><span></span><br />

$(function(){
    $('.validate_me').keyup(function(){
        var this_val = $(this).val();
        var valid_compare = $(this).attr("valid_compare");

        if (this_val != "" & this_val != valid_compare ){
            $(this)
                .next()
                .css("margin-left","100px")
                .html("<img src='http://png.findicons.com/files/icons/1581/silk/16/tick.png' />")
                .animate({
                    marginLeft: '10px'
                }, 1000, function(){
            });   
        } else {
            $(this).next().html("");
        }
    });
});

以下是keyup（）的工作示例： http://jsfiddle.net/9gg3n/4/

所以我已经为输入字段的wach添加了一个自定义属性，以便进行验证（例如：！= Name，！= Email等...）。当用户移动类型（keyup（））时，它会检查它是否有效，并且如果它是

则设置动画。

jQuery Animate功能＆amp;每个功能

2 个答案: