Анимация с jQuery скрывает один div и показывает другой плавно - PullRequest
Новая
       22

Анимация с jQuery скрывает один div и показывает другой плавно

0 голосов
/ 11 сентября 2018

Я ищу похожую анимацию, например, этот сайт, когда вы включаете их слайд, он плавно меняет слайды, но я не знаю, какой плагин они используют, и как я тоже пробую это делать сам с 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Я думаю, что вашу проблему можно решить, добавив правило css к вашим компонентам анимации, которое определяет свойство transition, смотрите здесь для получения дополнительной информации https://developer.mozilla.org/es/docs/Web/CSS/transition. Также вам советую взглянуть на https://daneden.github.io/animate.css/, это чистая библиотека анимации CSS.

...