窗體字段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，該示例使用佔位符，因此您知道在表單中鍵入的內容。當你看我的例子時，如果沒有佔位符，用戶不知道輸入什麼。