时间戳

首页 > 解决方案 > Javascript 从左到右滑动

javascript - Javascript 从左到右滑动

问题描述

我想要：

  1. 从标题的缩写到写出的含义+副标题的展开动画，其中包含有关该主标题的信息。

编辑：示例：S3 推出“固化固态”，并在发生这种情况后立即使副标题的透明度逐渐增加

  1. 单击时将其从左向右展开（从而显示隐藏的基础信息）。

  2. 我在 jsfiddle 中所做的似乎很不稳定。（它在两个部分中打开辅助文本）。

<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
<div class = "s3notebox">
    <h1>S3</h1>
</div>
<div class = "sub-headings">
    <p>S3 notes go in this section which should flare out.</p>
</div>

CSS：

.s3notebox{
    background-color: rgba(174, 214, 241, 0.5);
    display: flex, inline-block;
    white-space: nowrap;
    height: 3em;
    width: 10vw;
    font-family: 'Poppins', sans-serif;
    border-left: 6px solid #48C9B0;
    border-radius: 2px;
}

.sub-headings{
    white-space: nowrap;
    height: 3em;
    width: 10vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-left: 6px solid yellow;
    position:absolute;
}

JS：

$(document).ready(function(){
    $(".s3notebox").click(function(){
      $(".sub-headings").slideToggle();
    });
  });

https://jsfiddle.net/snpb0gau/

标签： javascripthtmlcss

解决方案

我刚刚写了一个解决方案。在这里，我对您的 html、css 和 js 文件进行了一些更改。希望它会帮助你。

$(document).ready(function(){
  $(".s3notebox").click(function(){
    $("#subHeading").toggleClass('left-to-right-slide');
  });
});
.s3notebox{
    background-color: rgba(174, 214, 241, 0.5);
    display: flex, inline-block;
    white-space: nowrap;
    height: 3em;
    width: 10vw;
    font-family: 'Poppins', sans-serif;
    border-left: 6px solid #48C9B0;
    border-radius: 2px;
}

.sub-headings{
    white-space: nowrap;
    height: 3em;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-left: 6px solid yellow;
    position: absolute;
    transition: all 0.33s ease;
    left: -100%;
}

.left-to-right-slide {
  left: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s3notebox">
  <h1>S3</h1>
</div>

<div id="subHeading" class = "sub-headings">
  <p>S3 notes go in this section which should flare out.</p>
</div>

推荐阅读