2017-05-27 10 views
-1

Guten Tag,Wie kann ich meinen Text mit jQuery anzeigen lassen?

Ich versuche, einen SlideDown-Effekt zu erstellen, wenn der Benutzer den Mauszeiger über ein bestimmtes div bewegt und dann wieder zurückkehrt, wenn der Benutzer den Mauszeiger über div entfernt. Bitte beachten Sie, dass der Code mit Bootstrap4 geschrieben wurde, ich bin mir nicht sicher, ob das einen Unterschied macht.

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

Antwort

2

, wenn das Ziel nicht mehr sichtbar ist, können Sie nicht über sie schweben. Sie können jedoch ein übergeordnetes Element verwenden, dies zu tun (ich habe mich verändert, es zu mouseenter und 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>

0

Sie können versuchen, diese auch:

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

Or

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

Sie wahrscheinlich w ant die Ereignisse an die Eltern div gebunden. Kann auch hover() verwenden, die sowohl Veranstaltungen und slideToggle() deckt die

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

funktioniert
Verwandte Themen