Question

我一直在阅读有关如何将值淡入输入字段的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 transitions

Browser compatibility chart

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="worksearch">
    <tr>
        <td>
            <input type="text" class="working">
        </td>
        <td>
            <div id="workinggeo">test</div>
        </td>
    </tr>

Answer 2

如果您不介意加载jQuery UI，可以使用以下方法设置文本的rgba颜色属性：

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

<强> jsFiddle example

Answer 3

首先隐藏然后只使用fadeIn：

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

您的更新fiddle。

Answer 4

添加其他可能的解决方案，如果您不想进入必须添加jQUery UI或尝试CSS转换的麻烦，您可以通过使用animation()函数仅使用jQuery实现此功能和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

如果您定位现代浏览器（并且可以轻松使用CSS3功能），我会有占位符并使用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

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

5 个答案: