$(document).ready(function()
{
$(".facebook").hover(function()
{
$(this).stop().animate({marginLeft:"-10px"},1500);
},function()
{
$(this).stop().animate({marginLeft:"-240px"},"fast");
});
$(".google").hover(function()
{
$(this).stop().animate({marginLeft:"-10px"},1500);
},function()
{
$(this).stop().animate({marginLeft:"-240px"},"fast");
});
});
<html>
<head>
<title>Jquery window animation</title>
</head>
<body>
<div id="myDiv" class="facebook">
<a id="myAnchor" href="http:www.facebook.com" alt="Facebook">Go to Facebook</a>
<img id="myImg" src="http://3.bp.blogspot.com/-V2kw4WIoaGM/UQ1MURRfsGI/AAAAAAAAAS0/lGtxs5b4n7M/s1600/facebook.jpg" alt="Facebook" />
</div>
<div id="myDiv" class="google">
<a id="myAnchor" href="http:www.twitter.com" alt="Gmail">Go to Twitter</a>
<img id="myImg" src="http://1.bp.blogspot.com/-toopT2OqXsU/UQ1NfVY440I/AAAAAAAAAS8/E_6FEjhIpQY/s1600/twitter.jpg" alt="Twitter" /></div>
</body>
</html>
#myDiv
{
width:224px;
height:200px;
margin-left:-240px;
border:3px solid black;
}
#myImg
{
margin-top:50px;
float:right
position:absolute;
margin-left:234px;
}
#myAnchor
{
margin-top:70px;
margin-left:20px;
position:absolute;
font-family:comic sans ms;
}