Question

I have an input with an X (clear) button to clear the value. I want that button to fadein if there is a value in the input.

Here is a fiddle of what I have: http://jsfiddle.net/3m25K/

<input class="inputfield">

$('input.inputfield').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {

    $('.inputfield').val('').focus();
}));

input{
    font-size:22px;}
span.deleteicon {
    position: relative;
}
span.deleteicon span {
    position: absolute;
    display: block;
    top: -5px;
    right: 7px;
    width: 24px;
    height: 24px;
    background:black;
    cursor: pointer;
}

Answer 1

You could just add a keyup handler and check the if the <input>‘s value has transitioned from none to some or some to none and then apply a fadeIn or fadeOut to the button. Something like this:

$('.inputfield').keyup(function() {
    var $span = $('.deleteicon span');
    if(this.value.length > 0 && !$span.is(':visible'))
        $span.stop().fadeIn();
    else if(this.value.length == 0)
        $span.stop().fadeOut();
});

Live version: http://jsfiddle.net/ambiguous/MDnac/3/