Question

因此，我有一个包含div的标题为“关于我”的信息，并且在包含div的内容中回显了文本。当div从左向右滑动时，仅在幻灯片完成后，所有文本才会一次神奇地出现。我如何使文本与幻灯片一起显示，而不是在幻灯片后立即显示。即。滑动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。

通过删除position:relative元素上的.ubout规则，当元素滑入和滑出视图时，显示文本即可实现所需的结果。

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

再次，要获得结果，我只是从position:relative类规则中删除了.ubout：

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

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

1 个答案: