fadeIn() value into an input field, how?

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.net/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.

Answers:

Answer

Besides using the animate process described by j08691 you can also use 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

First hide then only use fadeIn:

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

Your updated fiddle.

Answer

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

Answer

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.net/tgt6xtLh/

Answer

If you're targeting the modern browsers (and can comfortably 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.com/xudizi/3/edit?html,css,output

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.