JQuery

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?
By:

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

Example:

<html lang="en">
<head>
    <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;
            }
    </style>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#logo").hover(function () {
               $(this).find("div").show("slide");
            }, function () {
               $(this).find("div").hide("slide");
            });
        });
    </script>
</head>
<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>
    </div>
</body>
</html> 

Output:

sliding in and out effect in jQuery

Related Article

Post your comments / questions



Recent Article