How to create slide in and out effect using jquery?

How to create slide in and out effect using jquery?, someone asked me to explain?

When the user hovers over an image showing addition information about the image caption with animation effect showing and hiding.


<html lang="en">
    <meta charset="UTF-8">
    <title>sliding in andout effect</title>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style type="text/css">
        #logo {
            position: relative;
            text-align: center;
           #logo img {
               margin-bottom: 20px;
            #logo div {
                display: none;
                width: 100%;
                height: 10%;
                padding: 10px 0;
                position: absolute;
                left: 0;
                bottom: 0;
                top: auto !important;
                text-align: center;
                font-style: italic;
                background-color: #FF9800;
                color: #fff;
    <script type="text/javascript">
       $(document).ready(function () {
            $("#logo").hover(function () {
            }, function () {
<body style="border: 1px solid #DED8D8; width: 500px; height: 250px; font-family: Arial;">
    <h1 style="color: #E91E63">sliding in and out effect  </h1>
    <div id="logo">
        <img src="http://www.infinetsoft.com/Uploads/20160523103730logosmall.png" alt="small logo" />
        <div>learn .net withlot of helpful programming tutorials </div>


sliding in and out effect in jQuery

Post your comments / questions