I have been reading several answers to questions here on SA about how to fade a value into an input field. And when I try the code, it doesn't work. I've tried a couple of things but still no luck:

here is the jsfiddle /

I've tried:

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

and

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

with zero luck, can anyone help solve this please, if it's at all possible. Many thanks.

I have been reading several answers to questions here on SA about how to fade a value into an input field. And when I try the code, it doesn't work. I've tried a couple of things but still no luck:

here is the jsfiddle http://jsfiddle/bLcszctz/1/

I've tried:

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

and

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

with zero luck, can anyone help solve this please, if it's at all possible. Many thanks.

• javascript
• jquery

Share Improve this question Follow asked Jan 31, 2015 at 17:42 luke_mclachlanluke_mclachlan 1,05411 gold badge1515 silver badges3535 bronze badges 1

• jsfiddle/bLcszctz/3 – adeneo Commented Jan 31, 2015 at 17:58

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Besides using the animate process described by j08691 you can also use CSS3 transitions

Browser patibility 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./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>

First hide then only use fadeIn:

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

Your updated fiddle.

If you don't mind also loading jQuery UI you can animate the rgba color property of the text with:

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

jsFiddle example

Adding to the other possible solutions, and if you don't want to get into the hassle of having to add jQUery UI or try CSS transitions, you can implement this only with jQuery by playing with the animation() function and the step function:

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

You can see it working here: http://jsfiddle/tgt6xtLh/

If you're targeting the modern browsers (and can fortably use CSS3 features), I'd have a placeholder and use the opacity property to fade in on input focus (and no use of javascript), like this:

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; 
}

Note that grouping the placeholder CSS does not work on some browsers, so they are placed as single rules.

I have a working jsbin example here[1]

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