JQUERY - 如何在其包含的 div 框从左向右滑动时显示文本？

Question

所以我有一个包含 div，标题为“关于我”，并在包含 div 内回显文本。当div从左向右滑动时，只有在滑动完成后，所有的文字才会神奇地同时出现。我如何让文本与幻灯片一起出现，而不是在它之后立即神奇地出现。 IE。滑动 div 在滑动时显示文本，而不是在滑动结束时显示文本，然后再显示它。

这是我的CSS:

/*ABOUT CARD SLIDE RIGHT*/
.profile-about { /* contains profile card and about card */
float: left;
}

.u-about50 {
display: none;
position: relative;
top: 113px;
right: 79px;
width: 600px;
height: 220px;
background-color: white;
border-radius: 10px;
margin: 0px;
z-index: 11;
}

.ubout {
margin: 0px;
position: relative;
bottom: 200px;
padding: 10px;
display: inline-block;
word-wrap: break-word;

}

.a-btn {
 -webkit-transform:rotate(90deg);
 float: left;
 position: absolute;
 left: 500px;
 top: 270px;
 z-index: 12;
 border: solid;
 border-color: #333333;
 border-radius: 5px;
 background-color: #333333;
 cursor: pointer;
 border-style: solid;
 box-shadow: none;
 font-family: Lucidatypewriter, monospace;
 color: white;
}

这是我的 Jquery:

$(document).ready(() => {


$('.dropbtn').on('mouseenter', () => {
$('.dropdown-content').slideDown('slow');
});

$('.dropdown-content').on('mouseleave', () => {
$('.dropdown-content').slideUp('slow');
});

$('.a-btn').on('click', () => {
  $('.u-about50').toggle('slide', {direction: 'left'},1000);

});


});

这是我的 html:

 <section>
 <div>
    <div class="profile-about">
    <div class="u-profile-card">
        <h3>Guide:</h3>
        <div>
          <h2><?php echo ucfirst($first);?> <?php echo $last; ?></h2>
        </div>
        <div class="img-txt">
        <div class="image-cropper">
        <img class="u-image" src="uploads/<?php echo $image; ?>" alt="no 
   image found">
        </div>
        <div class="u-info">
        <h2><?php echo ucfirst($u_city); ?>, <?php echo ucfirst($u_region); ? 
  >, <?php echo ucfirst($u_country); ?></h2>
        <h2><?php echo ucfirst($u_rating); ?> Stars</h2>
        <h2 class="u-email"><?php echo ucfirst($email); ?></h2>
        </div>
      </div>
    </div>
    <button class="a-btn">About</button>
    <div class="u-about50">
        <div class="ubout">
          <h1>About me</h1>
          <p><?php echo ucfirst($about); ?></p>
        </div>
    </div>
    </div>

Answer 1

我怀疑有一些更大的流量/定位在起作用，这导致了您当前应用的特定 CSS，但其当前形式的问题(至少基于提供的代码片段)是相对定位的使用.u-about50 元素及其子 .ubout。

通过删除 .ubout 元素上的 position:relative 规则，当元素滑入和滑出 View 时文本会出现，从而实现预期的结果。

代码笔在这里: https://codepen.io/anon/pen/mGbqax

同样，为了达到这个结果，我只是从 .ubout 类规则中删除了 position:relative:

.ubout {
margin: 0px;
bottom: 200px;
padding: 10px;
display: inline-block;
word-wrap: break-word;
background-color: lightgray; /* added for illustration */
}