Slower animation on add song button

[misostc]

The animation on the "Add Song" button is too fast! I think you use 0.15s instead od 0.5s. Then it should give you nicer, smoother animation. Also, the placeholder for some reason disappears right after you click the button. I think the default behavior of placeholder in HTML5 is great (the text stays visible until you actually start typing).

[MeoMix]

Misostc,

I have removed the code which clears the input's placeholder text per your response.

I have introduced support for playing with the expansion/contraction properties of the input. I am not confident that the values are as good as they could be, but I think it's a start.

Lines 21 through 45 of urlinput.js:

//TODO: Play with animate until it feels right.
//http://jqueryui.com/demos/effect/easing.html
var _expand = function(){
    _input.css('opacity', 1).css('cursor', "auto");
    _icon.css('right', '0px');

    _button.animate({
        width: '350px'
    }, 250, 'easeInQuad')

    // _button.width('350px');
    _input.focus();
}

var _contract = function(){
    _input.css('opacity', 0).css('cursor', "pointer").blur();
    _icon.css('right', '-30px');

    _button.animate({
        width: '120px'
    }, 150, 'linear')

    return false; //Clicking the 'X' icon bubbles the click event up to the parent button causing expand to call again.
}

$('#addSongButton').click(_expand);
$('#addSongCancelIcon').click(_contract);

I played with the easing transitions a bit as well as the times. I'm not sure what kind of transition is expected by the user when closing. The opening one is OK, but I feel like it takes too long to open with some of the ease-in transitions.

Feel free to tinker for yourself. :)

[misostc]

Oh, you don't need to animate it in JS, the animation I built was in CSS, see this line.

[MeoMix]

Ohh, I see. I am not very familiar with CSS transitions -- did not think to check there. :) I made per your first comment.