javascript - jQuery动画隐藏一个div并平滑显示其他
问题描述
我正在寻找类似这个网站的一些类似的动画,当你在他们的幻灯片上流畅地更改幻灯片时,但我不知道他们正在使用什么插件,以及我如何自己尝试使用 jquery 并且它可以部分工作但不流畅和它在后台隐藏了一个节目
我的代码:
PS:我在其中添加了过渡,但它减少了一点图像没有正确计算
function slideAnimation(n,e)
{
var height = $('.'+e).height();
var move = height*n;
$('#slide').css('transform','translateY(-'+move+'px)');
$('#slide').css('transition','transform 1s');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li onmouseenter="slideAnimation(1,'first')" id="first">First</li>
<li onmouseenter="slideAnimation(2,'second')" id="second">Second</li>
<li onmouseenter="slideAnimation(3,'third')" id="third">Third</li>
</ul>
<div style="overflow: auto">
<div id="slide" style="display:block;height:13px;transform: translateY(-13px); transition: transform 1s">
<ul>
<li class="a first"><img src="1.png"></li>
<li class="a second"><img src="2.png"></li>
<li class="a third"><img src="3.png"></li>
</ul>
</div>
</div>
解决方案
我认为您的问题可以通过向定义属性的动画组件添加 css 规则来解决transition
,请在此处查看更多信息https://developer.mozilla.org/es/docs/Web/CSS/transition。另外你我建议你看看https://daneden.github.io/animate.css/,它是一个纯 css 动画库。
推荐阅读
- spring - 如何在打包为战争的 Spring Boot 应用程序中加载其他属性文件?
- time-complexity - BFS 糟糕的复杂性
- python - 如何让 Tkinter 运行可执行文件?
- c# - 当值太大时,C# 代码返回方法外
- r - 使用 R Mongolite 连接到 Amazon DocumentDB
- angular - 根据单击的拇指更改完整图像不起作用,方法正在使用中
- python - 为什么 Python 在超出实际递归限制之前引发 RecursionError?
- python - 为什么 ylim 对我的情节没有预期的效果?
- mysql - 更新 mysql nodejs
- python - 为什么每一层都采用初始输入数组形状而不是前一层的输出