テキストをjQueryでスライダダウンするにはどうすればよいですか？

Question

こんにちは、

ユーザーが特定のdivをマウスオーバーすると、slideDownエフェクトを作成しようとしていますが、ユーザーがdivをマウスオーバーするときに戻ってきます。コードがBootstrap4で書いていたことに注意してください。違いがあれば分かりません。

$(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>

Answer 1

目標は、あなたがそれの上にカーソルを移動することはできませんもはや見えないとき。しかし、あなたがそうするように、親要素を使用することができます（私はmouseenterと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>

Answer 2

はあなたにもこれを試すことができます。

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

か

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

Answer 3

おそらくwイベントは親divにバインドされます。両方のイベントをカバーするhover()と双方向に使用できるslideToggle()を使用することもできます。

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