I am trying to create a JQuery Animation that will move a div covering a text box up into the border when clicked. Despite multiple attempts, I can't seem to get the animation to work properly. Any suggestions?
JavaScript
function moveup(title,text){
$(title).animate{
if (text).value==""){
$(title).animate({
top: '-18px'}, '300');
$('text').focus();
}
{
$('.inputborder').css({
border: 'solid 2px #49acc7'}, '300');
}
{
$('.inputtitle').css({
color: '#49acc7'}, '300');
}
}
}
function movedown(t){
if (t.value==""){
$('.inputtitle').animate({
top: '0px'}, '300');
}
{
$('.inputborder').css({
border: 'solid 2px #bec3c8'}, '300');
}
{
$('.inputtitle').css({
color: '#bec3c8'}, '300');
}
}
Inline Code
<div id="custnumbertitle" class="inputtitle" style="z-index:2;position:absolute;width:300px;height:35px;text-align:left;left:23px;top:0px;vertical-align:middle;line-height:35px;" onclick="moveup('custnumbertitle,custnumber')"><span style="background-color:white;">CUSTOMER NUMBER</span><Input Type="text" id="custnumber" onblur="movedown(this)" width="150px" style="z-index:1;position:relative;top:3px;right:0px;width:320px;height:30px;border-radius:20px;border: solid 0px #bec3c8;"><a href="#" class="tooltip">