How can I have my text slidedown with jQuery?

Good afternoon,

I am trying to create a slideDown effect when the user mouseover a particular div, and then returns back up when the user removes the mouseover the div. Please note the code was writing with Bootstrap4, I'm nor sure if that makes any difference.

$(document).ready(function () {
    'use strict';
    
    $("p.card-text").on("mouseover", function () {
        $(this).slideDown();
    });
    $("p.card-text").on("mouseout", function () {
        $(this).slideUp();
    });
});

<div class="card">
    <a href="http://www.castro4designs.com" target="_blank"><img src="img/home.png" height="240" width="356" alt="4Design Home Page"></a>
    <p class="card-text">Castro4design.com was my first official website which was done for my 'Intro to New Media Tech' class. The site consist of basic HTML and CSS. The site was to keep track of all our work throughout our college career.</p>
</div>

Solution

when the target is no longer visible you can't hover over it. but you can use a parent element to do so (i've changed it to mouseenter and mouseleave):

$(document).ready(function () {
    'use strict';
    
    $(".card").on("mouseenter", function () {
        $('.card-text',this).slideDown();
    });
    $(".card").on("mouseleave", function () {
        $('.card-text',this).slideUp();
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
    <a href="http://www.castro4designs.com" target="_blank"><img src="img/home.png" height="100" width="106" alt="4Design Home Page"></a>
    <p class="card-text">Castro4design.com was my first official website which was done for my 'Intro to New Media Tech' class. The site consist of basic HTML and CSS. The site was to keep track of all our work throughout our college career.</p>
</div>