Question

当您在幻灯片上滑动时，我正在寻找类似的动画网站，但它平滑地更换了幻灯片，但我不知道他们使用的是什么插件，我也将如何使用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>

Answer 1

我认为可以通过向动画组件添加定义属性transition的css规则来解决您的问题，有关更多信息https://developer.mozilla.org/es/docs/Web/CSS/transition，请参见此处。另外，我建议您看看https://daneden.github.io/animate.css/，它是一个纯CSS动画库。

jQuery动画隐藏一个div并平滑显示其他

1 个答案: