Question

我要

：

从标题的缩写到显示的含义+带有相关主标题信息的副标题的展开动画。

编辑：示例：S3展开为“固态化”，并在出现这种情况后使副标题的透明度逐渐增加

在单击它时从左向右展开（从而显示隐藏的基础信息）。
我在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/

Answer 1

我刚刚写了一个解决方案。在这里，我对您的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>

Javascript左右滑动

1 个答案: