次のコードを見てください。
<html>
<head>
<style>
body,p,ul,ol,li,img,h1,h2,h3,h4,h5,h6,div,hr,br{margin:0;padding:0;}
body{background:yellow;}
#side1 {background:#99f;position:fixed;right:-100;top:50;
border-top-left-radius:15px;border-bottom-left-radius:15px; padding:15px; width:150px;}
#side1:hover { } /* I want this to slide in and back to position based on hover */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id=side1 >Twitter</div>
</body>
</html>
最も単純なコードでホバリングすることに基づいて、この div をスライドインおよびスライドアウトさせたいと思います。最も簡単なコードでこれを達成する方法を教えてください。