将fadeIn（）值转换为输入字段，如何？

我一直在阅读有关如何将值淡入输入字段的SA的问题的几个答案。 当我尝试代码时，它不起作用。 我尝试过几件事，但仍然没有运气：

这里是jsfiddle http://jsfiddle.net/bLcszctz/1/

我试过了：

$('#workinggeo').click(function () { $('.working').fadeIn('slow', function () { $('.working').val('finding...'); }); }); 

和

 $('#workinggeo').click(function () { $('.working').val('finding...').fadeIn('slow'); }); 

没有运气，任何人都可以帮助解决这个问题，如果可能的话。 非常感谢。

Answer 1

除了使用j08691描述的动画过程之外，您还可以使用CSS3过渡

浏览器兼容性图表

 $('#workinggeo').click(function () { $('.working').val("finding...").addClass("show"); }); 

 input.working { transition: color 1s; color:#FFF; } input.show { color:#000; } 

  
 
 
  
 
 
test
 
  

Answer 2

如果您还不介意加载jQuery UI，可以使用以下命令为文本的rgba颜色属性设置动画：

 $('#workinggeo').click(function () { $('.working').val('finding...').animate({ color: 'rgba(0,0,0,1)' },1000); }); 

jsFiddle示例

Answer 3

首先隐藏然后只使用fadeIn：

 $('.working').val('finding...').hide().fadeIn('slow'); 

你的更新小提琴 。

Answer 4

添加到其他可能的解决方案，如果您不想进入必须添加jQUery UI或尝试CSS转换的麻烦，您可以通过使用animation()函数和step函数来实现这个：

 $('#workinggeo').click(function () { if (!this.anim) { this.anim = { st:0 }; } $(".working").val("finding..."); $(this.anim).stop(true, false).animate( { st: 100 }, { duration:1000, step: function(now, fx) { $(".working").css("color", "rgba(0,0,0," + (now/100) + ")"); } } ); }); 

你可以在这里看到它： http ： //jsfiddle.net/tgt6xtLh/

Answer 5

如果您的目标是现代浏览器（并且可以轻松使用CSS3function），我会有一个占位符并使用opacity属性淡入输入焦点（并且不使用javascript），如下所示：

 input::-webkit-input-placeholder { opacity: 0; } input:-moz-placeholder { opacity: 0; } input::-moz-placeholder { opacity: 0; } input:-ms-input-placeholder { opacity: 0; } input[placehodler] { opacity: 0; } input:focus::-webkit-input-placeholder { opacity: 1; color: #000; transition: opacity 0.2s 0.2s ease; } input:focus:-moz-placeholder { opacity: 1; color: #000; transition: opacity 0.2s 0.2s ease; } input:focus::-moz-placeholder { opacity: 1; color: #000; transition: opacity 0.2s 0.2s ease; } input:focus:-ms-input-placeholder { opacity: 1; color: #000; transition: opacity 0.2s 0.2s ease; } input[placehodler]:focus { opacity: 1; color: #000; transition: opacity 0.2s 0.2s ease; } 

请注意，对占位符CSS进行分组在某些浏览器上不起作用，因此将它们作为单个规则放置。

我这里有一个有效的jsbin例子[1]

[1] http://jsbin.com/xudizi/3/edit?html,css,output