Javascript 如何将fadeIn（）值输入到输入字段中？

我一直在阅读SA上关于如何将值淡入输入字段的几个问题的答案。当我尝试代码时，它不起作用。我尝试了一些方法，但仍然没有成功：

这是JSFIDLE

我试过：

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

及

---

如果可能的话，任何人都不能帮我解决这个问题。非常感谢。

先隐藏，然后只使用fadeIn：

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

---

您的已更新。

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

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

---

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

$（'#workinggeo'）。单击（函数（）{
$（'.working'）.val（“查找…”）.addClass（“显示”）；
});
input.working{
过渡：颜色1s；
颜色：#FFF；
}
input.show{
颜色：#000；
}

测试
添加到其他可能的解决方案中，如果您不想陷入必须添加jQUery UI或尝试CSS转换的麻烦，您只能通过使用jQUery的
animation（）
函数和
步骤
函数来实现这一点：

$('#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) + ")");
            }
        }
    );
});

您可以在这里看到它的工作原理：
如果您的目标是现代浏览器（并且可以轻松地使用CSS3功能），我会有一个占位符，并使用不透明属性在输入焦点上淡入（不使用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] 
它还隐藏了输入元素。谢谢，但正如@Ashad提到的，输入也会消失，这并不理想。不过，这是一个很好的短期修复。您好，谢谢您的输入，但我确实希望避免使用UI：-（，不幸的是，我的页面上已经有足够的代码了。对于我来说，为一个简单的动画加载库是没有意义的。这很好地工作。我测试的第一个动画的值会很好地衰减，因此非常感谢。无需加载UI库就更好了。我将看看其他答案but到目前为止我最喜欢的，所以非常感谢！这是一个非常干净的解决方案，Patrick。非常感谢您的帮助，它工作完美，代码最少。
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; 
}