窗体字段jquery上的动画

Question

我重新创建学习webdev的这个模板有一个动画，当在表单域上键入单个/多个字符时启用该动画。当任何字符输入并淡入时，占位符淡出绿色表单字段中没有字符。

这里是模板：

http://ironsummitmedia.github.io/startbootstrap-freelancer/#

如何实现这个动画？ 在此先感谢！

Answer 1

当点击输入时，如果输入有多个字符显示隐藏标签。

换句话说：
当KEYUP，如果输入长度> 0，那么不透明度将是1

代码：

$(function(){ 

$('input').keyup(function(){ 
    if ($(this).val().length > 0) { 
     $(this).prev('label').css('opacity','1'); 
    }   

    if ($(this).val().length == 0) { 
     $(this).prev('label').css('opacity','0'); 
    } 
}); 


}); 

在该示例中标签与输入必须是兄弟姐妹，这只是一个例子。

的jsfiddle：
http://jsfiddle.net/n2v26cxg/

Answer 2

这是一个非常酷的效果！

这是通过一些简单的CSS3 transitions实现的。如果打开DOM浏览器，您可以看到添加到输入字段周围的包装中的类。该类是.floating-label-form-group-with-value，它有一个相应的规则，使<label>字段具有不透明性，通常不可见（不透明度为0）。

如果你这样做是为了学习，我不会给你确切的代码破坏所有的乐趣，但这里有最基础的：

1）的形式输入字段有定位top:2em标签和有opacity:0页面加载时

2）有某种JavaScript代码检测输入变化时，和一类适用于父容器，类似这样的（我使用jQuery）：

$('#contactForm input').change(function(){ $(this).parent().addClass('has-value'); }

3）是用于在该实施例中添加的类（div.has-value样式规则），改变两者的opacity和label元件

4）与宽松甲transition样式规则被添加到规则与的top位置添加的类，这样label将在类添加后平滑过渡。因此，规则是这样的：

#contactForm div label{ 
    display:block; 
    position:relative; 
    top:2em; 
    opacity:0; 
} 
#contactForm div.has-value label{ 
    top:0; 
    opacity:1; 
    transition: top .3s ease, opacity .3s ease; 
} 

这是它的基本功能。请注意，在我的示例中，我没有包含CSS3转换的供应商前缀，但是您会看到是否检查了原始链接的代码，它们涵盖了所有使用-ms-transition和-moz-transition的基数。

继续学习，祝你好运！

Answer 3

您发布的示例是检查输入中的值，然后更改输入&标签容器上的类。

如果您在输入字段中输入时观看代码，则其容器div会将floating-label-form-group-with-value添加到其中。这改变了CSS的label元素，像这样：

.floating-label-form-group label { 
    opacity: 0; 
    top: 2em; 
    -webkit-transition: top .3s ease,opacity .3s ease; 
    -moz-transition: top .3s ease,opacity .3s ease; 
    -ms-transition: top .3s ease,opacity .3s ease; 
    transition: top .3s ease,opacity .3s ease; 
    ... 
} 

.floating-label-form-group-with-value label { 
    top: 0; 
    opacity: 1; 
} 

正如你可以在CSS transition上面的代码中看到已被使用，该动画淡入向上滑动的标签。然后top和opacity值的变化定义了它移动到的位置以及它淡入的程度。

JavaScript的这个似乎是由称为jqBootstrapValidation的第三方工具控制的，它是Twitter Bootstrap框架的一部分。您可以使用此为您的窗体或使用类似这样的事情：

$('input').on('change keydown keyup',function(){ 
    if(!$(this).val() == "") { 
    $(this).parent().addClass('floating-label-form-group-with-value'); 
    } 
    else { 
    $(this).parent().removeClass('floating-label-form-group-with-value'); 
    } 
}); 

我希望有某种意义。

这里是工作的代码示例的链接： https://jsfiddle.net/31borLqh/

有一点要记住的是，我在这里只提供了做一个动画，并不实际验证表单字段，用户可以当前提交什么他们想进入这个领域，它会验证是正确的。

要思考的另一件事是这种形式的UX，该示例使用占位符，因此您知道在表单中键入的内容。当你看我的例子时，如果没有占位符，用户不知道输入什么。