CODEWITHSUNDEEP
jqueryhtmlslidedown
Edwin Rafael Castro
Edwin Rafael Castro

Reputation: 37

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>

Upvotes: 0

Views: 1156

Answers (3)

Unnati
Unnati

Reputation: 358

You can try this as well :

$( "#card" ).click(function() {
   $( "#card_text" ).slideToggle( "slow", function() {
       //other code
   });
});

Or

$( "#card" ).click(function() {
    $( "#card_text" ).slideToggle( "slow" );
});

Upvotes: 0

Sagiv b.g
Sagiv b.g

Reputation: 31024

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>

Upvotes: 2

charlietfl
charlietfl

Reputation: 171700

You probably want the events bound to the parent div. Can also use hover() which covers both events and slideToggle() which works for both directions

$(".card").hover(function () {
    $(this).find('p.card-text').stop(true, true).slideToggle();
})

Upvotes: 0

Related Questions