如何使用 jQuery 使我的文本下拉？

Question

下午好，

我试图在用户将鼠标悬停在特定 div 上时创建 slideDown 效果，然后在用户将鼠标悬停在 div 上时 returns 返回。请注意代码是用 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

您可能希望将事件绑定到父 div。也可以使用涵盖两个事件的 hover() 和适用于两个方向的 slideToggle()

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

如何使用 jQuery 使我的文本下拉？

How can I have my text slidedown with jQuery?

jquery

html

slidedown