Как сделать анимацию скрытия контента?

Question

[Web__Nikita03]

Есть 2 блока которые показываются, и кнопка при нажатии на которую вылазеют еще 8 таких блоков. Так вот анимация сделанна при помощи animate.css. Вылазиет контент красиво сверху вниз, а вот убирается просто исчезает! Как сделать чтобы когда исчезало уезжало вниз?

<div class="container">
		<section class="section-three" id="four">
			<div class="row">
				<div class="col-md-5 offset-md-1">
					<div class="section-item">
						<div class="section-img">
							<img src="img/section-5.jpg">
						</div>
						<p class="section-categories">Lifestyle</p>
						<p class="section-name">Top 10 song for running</p>
						<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
					</div>
				</div>
				<div class="col-md-5 ">
					<div class="section-item">
						<div class="section-img">
							<img src="img/section-6.jpg">
						</div>
						<p class="section-categories">Lifestyle</p>
						<p class="section-name">Cold winter days</p>
						<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
					</div>
				</div>
			</div>
			<div class="dop-content animated fadeInDown fadeOutUp">
				<div class="row">
					<div class="col-md-5 offset-md-1">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-5.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Top 10 song for running</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
					<div class="col-md-5 ">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-6.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Cold winter days</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
					<div class="col-md-5 offset-md-1">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-5.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Top 10 song for running</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
					<div class="col-md-5 ">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-6.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Cold winter days</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
					<div class="col-md-5 offset-md-1">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-5.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Top 10 song for running</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
					<div class="col-md-5 ">
						<div class="section-item">
							<div class="section-img">
								<img src="img/section-6.jpg">
							</div>
							<p class="section-categories">Lifestyle</p>
							<p class="section-name">Cold winter days</p>
							<p class="section-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
	<section class="section-btn">
		<button class="btn btn-outline-secondar footer-btn" id="footer-btn">Load more</button>
	</section>

$('#footer-btn').click(function(){
	$('.dop-content').toggleClass('dop-content_active');
	$('.dop-content').toggleClass('fadeOutUp');
})

Answer 1

[Марат Гарифуллин]

Может так?
jsfiddle.net/25g4ud0y

Comments

[Web__Nikita03]

У меня в консоли написанно, что slidetoggle is not function

[Марат Гарифуллин]

Web__Nikita03, Какая версия jQuery используется?

[Web__Nikita03]

3.3.1