使用val（）與jquery //輸入文字消失與jquery

我有一個輸入框，在那裏我想要一個文本消失。圍繞谷歌搜索後，我發現在這裏很好的解決方案： Fade out text value inside of text field using jQuery 使用val（）與jquery //輸入文字消失與jquery

但是，由於某種原因，它不與我的代碼在這裏工作：

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

你能告訴在那裏我弄錯了？謝謝

編輯：用戶鍵入的東西后面的文本應消失

來源

2015-03-13 Alexander Ivanov

如果我把$（「＃textboxid」），你不能動畫文本框中 – 2015-03-13 08:43:15

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

$(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 
});

Demo

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

請參閱此demo瞭解包含jQuery-UI庫的動畫。

參考

.animate

來源

2015-03-13 08:45:19 empiric

得到了動畫，並糾正了錯誤，謝謝！它看起來像文本不會在演示中消失。 – 2015-03-13 08:54:32

@AlexanderIvanov，其中的演示文本沒有消失，預期什麼時候發生？ – empiric 2015-03-13 09:03:44

hups，沒有看到測試消失，我的壞 – 2015-03-13 09:33:51

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>

來源

2015-03-13 08:41:22

內的文本，整個框消失，而我想要的文字消失。看看這裏http://jsfiddle.net/7ksWA/1/它看起來像文字消失。 – 2015-03-13 08:44:15

明白了。我已經更新了我的答案。只需使用CSS3轉換。 – 2015-03-13 09:38:32

使用val（）與jquery //輸入文字消失與jquery

回答

相關問題