Вот мой код:
<button type="submit" class="btn btn-primary process">Process</button>
<div class="col-4">
<div class="panel bg-panel-emotion p-2" id="panel1">
<div class="mytopic pt-2 bg-top-emotion">
<h3 class="d-inline-block text-light">Emotional</h3>
<!-- <i class="fa fa-arrow-right float-right text-light"></i> --><img src="right.svg" width="35px" height="35px" class="fa"></div>
</div>
<div class="mytext p-2 rounded-bottom bg-panel-emotion">
<p class="p-2 rounded">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</div>
</div>
А вот мои jQuery коды
<script type="text/javascript">
$(document).ready(function() {
$('.process').click(function() {
$('#panel1').fadeIn(1300);
$('.panel').css('display', 'block');
});
});
$(document).on('mouseenter', ".col-4", function() {
// $(this).find( "hr" ).css({visibility: 'visible', display: 'block'});
$(this).find('.mytext').css({
display: 'block'
});
$(this).find(".fa").stop().animate({
deg: -270
}, {
duration: 0,
step: function(now) {
$(this).css({
transform: 'translate(-100%, +35%) rotate(' + now + 'deg)',
transition: '0.5s'
});
}
});
}).on('mouseleave', ".col-4", function() {
// $(this).find( "hr" ).css({visibility: 'hidden', display: 'none'});
$(this).find('.mytext').css({
display: 'none'
});
$(this).find(".fa").stop().animate({
deg: 0
}, {
duration: 0,
step: function(now) {
$(this).css({
transform: 'translate(0, 0) rotate(' + now + 'deg)',
transition: '0.5s'
});
}
});
});
</script>
, когда я нажимаю на кнопку с классом процесса, div. панель должна отображать, когда я навеки на нее, отображается div.mytest. вопрос в том, как я могу плавно отобразить класс .mytext в jQuery
PS: это мой первый вопрос:)