Implementing Interactive feedback form Using Jquery

I had designed a magical feedback form using Jquery with easing animation effect. It's simple and interesting just hiding and showing the div tags with jquery. Use it and make something better your web project feedback box.

Javascript Code

Contains five animation move functions. Four click actions take a look at click(function()

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var feed_width = $('#feedback').width();
var scr_w = screen.width; // Screen Width
// 26 is width of the veritcal feedback button
var btn_width = 26;
var move_right = scr_w - btn_width;
var move_left = -(feed_width - btn_width);
var slide_from_left = 0;
var slide_from_right = scr_w - (feed_width - btn_width);
var center = ( scr_w / 2 ) - ( feed_width / 2 );

function positioningForm()
{
$('.left_btn').hide();
$('#feedback').css({"left": move_right+"px"}).show();
}
function slideFromRight()
{
$('#feedback').animate(
{left: slide_from_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').hide();
}
function slideFromleft()
{
$('#feedback').animate(
{left: slide_from_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').hide();
}
function moveLeft()
{
$('#feedback').animate(
{left: move_left+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.left_btn').show();
}
function moveRight()
{
$('#feedback').animate(
{left: move_right+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.right_btn').show();
}

// Positioning the feedback form at the time of page loading
positioningForm();

// Handling the right_btn and lift_btn event animations
$('.right_btn').click(function()
{
slideFromRight();
});

$('.left_btn').click(function()
{
slideFromleft();
});

// Moving left or right by clicking close button
$('.feed_close').click(function()
{
var pos = $('#feedback').position();
var ls = pos.left;
if(ls == slide_from_left)
{
// feedback form is at LEFT
moveRight();
}
else if(ls == center)
{
// feedback form is at RIGHT
moveRight();
}
else
{
// feedback form is at CENTER
moveLeft();
}
});
// Submit Form values

$('#submit_btn').click(function()
{
var name=$('#name').val();
var email=$('#email').val();
var msg=$('#msg').val();
if(name.length>0 && email.length>0 && msg.length>0)
{
$('.left_btn').hide();
$('.right_btn').hide();
$('.box').hide();
$('#feedback').animate(
{left: center+"px"},
{duration: 'slow',easing: 'easeOutElastic'});
$('.thankyou').show();
}
else
{
$('#error').html('Enter some thing');
}
return false();
});

});
</script>

HTML Code

Contains simple HTML code.

<div id="feedback"> 
<div class="right_btn"><img src="images/feed_right_btn.png" width="26px" height="99px"/></div> 

<div class="formdiv"> 

<div class='thankyou'> 
<h3>Thank you !</h3> 
<div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div> 
</div> 

<div class="box"> 
<table border="0"> <tr> 
<td><label>Name:</label><br/><input type="text" name="name" id="name"/> </td> 
<td valign="middle" align="right"><div class="feed_close"><img src="images/feed_close_btn.png" width="16px" height="15px"/></div></td> 
</tr> <tr> 
<td colspan="2"><label>Email:</label><br/><input type="text" name="email" id="email"/></td> 
</tr> <tr> 
<td colspan="2"><label>Message: </label><br/&gt;<textarea rows="5" cols="16" name="msg" id="msg"></textarea></td> 
</tr> <tr> 
<td colspan="2"><input id="submit_btn" type="submit" value="Submit"/><span id="error"></span></td> 
</tr> </table> 
</div> 
</div> 

<div class="form_submit"></div> 
<div class="left_btn"><img src="images/feed_left_btn.png" width="26px" height="99px"/></div> 
</div>

CSS

body{
width: 100%;
overflow: hidden; /* This is IMP */
padding: 0;
margin: 0 auto;
}
#feedback{
width: 362px;
padding: 10px;
position: absolute;
top: 100px;
display: none;
}
#feedback .formdiv{
width: 300px;
float: left;
background-color: #6f115c;
padding: 0px 5px 5px 5px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius:6px;
border-bottom-left-radius:6px;
min-height:100px;
}
#feedback label{
font:bold 11px arial;
color: #febaf9;
}
#feedback textarea{
width: 290px;
height: 100px;
color: #fcd1f2;
font: normal 11px verdana;
border: none;
padding: 5px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
resize: none; /* disable extending textarea in chrome */
}
#feedback input[type="text"]{
color: #606060;
font: normal 11px verdana;
padding: 3px;
width: 200px;
height: 25px;
border: none;
color: #fcd1f2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #943080;
-moz-box-shadow: inset 1px 1px 1px #4c0b3f;
-webkit-box-shadow: inset 1px 1px 1px #4c0b3f;
}
#feedback input[type="submit"]{
background-color: #ffaffa;
border: none;
color: #6f115c;
font:bold 11px arial;
padding: 2px 6px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
cursor: pointer;
}
#feedback .left_btn,
#feedback .right_btn{
width: 26px;
height: 100px;
float: left;
cursor: pointer;
}

#feedback .feed_close{
cursor: pointer;
margin:-15px -5px 0px 0px;
}
#error
{
color:#fff;
padding:4px;
font-size:11px;
}
.thankyou
{
text-align:center;
display:none;
}