JQuery Slide Left Right | JQuery Toggle Left Right

Recently I completed a project where I had to show a panel to the left side using JQuery, on mouse hover it comes out and on mouse leave it goes back. Its seems to be easy but to maintain the functionality is not that easy.

Here's a small snippet on how to do it.

HTML

---

[html]
<div id="sidePanel">
<div id="panelContent">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>
</div>
<div id="panelHandle">
<p>Facebook</p>
</div>

</div>
[/html]

---

JQuery

---

[js]
jQuery(function($) {
$(document).ready(function() {
$('#panelHandle').hover(function() {
$('#sidePanel').stop(true, false).animate({
'left': '0px'
}, 900);
}, function() {
jQuery.noConflict();
});

jQuery('#sidePanel').hover(function() {
// Do nothing
}, function() {

jQuery.noConflict();
jQuery('#sidePanel').animate({
left: '-201px'
}, 800);

});
});
});
[/js]

---

Demo :

---

---