將val（）與jquery一起使用//與jquery一起消失的輸入文本

Question

我有一個輸入框，我想要一個文本消失。 谷歌搜索之后，我在這里找到了一個不錯的解決方案： 使用jQuery在文本字段中淡出文本值

但是，由於某種原因，它不適用於我的代碼：

$(document).ready(function(){
  var input = $("#textboxid").val()
  input.animate({color:'white'},1000, function(){
    $(this).val('').css('color','black');
  }
});

你能告訴我我錯了嗎？ 謝謝

編輯：用戶輸入內容后，該文本應消失。

Answer 1

val（）獲取文本框的值 ，即在其中寫入的內容。 這是一個字符串。 您不能為字符串設置動畫，可以為jQuery對象設置動畫。

不要使用$("#textboxid").val() ，只需使用$("#textboxid") 。

編輯：

我僅使用CSS3就做到了。 這不需要任何庫，並且已硬件加速。

 $("button").click(function() { $("input").css("color", "white"); }); 

 input { -webkit-transition: all 1s linear; transition: all 1s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input value="some value"/> <button>Fade it away</button> 

Answer 2

腳本中存在一些語法錯誤：

$(document).ready(function () {
    var input = $("#textboxid"); //you have to use the object here and not the value-string
    input.animate({
        color: '#FFF'
    }, 1000, function () {
        $(this).val('').css('color', 'black');
    }); //the bracket was missing here
});

演示版

此外，jQuery不支持顏色屬性的動畫。 有關更多信息，請參見此處 。

有關包含的jQuery-UI庫的動畫，請參見此演示 。

參考

.animate