0

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

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

  1. 我在测试时将时间增加到 5 秒
  2. 为什么它会触发所有 3 个动画，因为我正在使用each和next功能。
  3. 有没有办法让动画开始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")
   });   
}
)};
4

2 回答 2

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。

于 2012-12-04T22:39:56.947 回答
0

你可以试试：

<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 />

​</p> 

$(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 中添加了一个自定义属性以进行比较以进行验证（例如：！= 名称，！= 电子邮件等...）。当用户移动类型 (keyup()) 时，它会检查它是否有效，如果有效，则为刻度设置动画

于 2012-12-04T22:14:57.267 回答