Slide bottom-bar Animation

index.html

<ul class="slide-bar">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

script.js

var $slideWrap = null,
	$slideItems = null,
	slideLength = null,
	slideHeight = null,
	slideWidth = null,
	// bar 설정
	barBG = null,
	barHeight = null;

$(function () {
	initSlide();
	initSlideCss();
	initSlideEvent();
});

function initSlide() {
	$slideWrap = $('.slide-bar');
	$slideItems = $slideWrap.children();
	slideLength = $slideItems.length;
	slideHeight = $slideWrap.height();
	slideWidth = 100/slideLength;
	// bar 설정
	barBG = 'black';
	barHeight = 10;
}

function initSlideCss() {
	$slideWrap.css({
		'width' : 100+'%',
		'position' : 'relative'
	});
	$slideItems.css({
		'width' : slideWidth+'%',
		'float' : 'left'
	});
	$slideWrap.append('<li class="bottom-bar"></li>');
	$('.bottom-bar').css({
		'position' : 'absolute',
		'top' : slideHeight,
		'height' : barHeight+'px',
		'width' : slideWidth+'%',
		'background' : barBG
	});
}
function initSlideEvent() {
	$slideItems.click(function () {
		var left = $(this).offset().left;
		moveBar(left);
	});
}
function moveBar(left) {
	$('.bottom-bar').animate({
		'left' : left
	}, 400);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

slide-bottom-bar-animation.markdown

Slide bottom-bar Animation

A Pen by dbstpwls on CodePen.

License.

style.css

*{
  padding: 0;
  margin: 0;
}
.slide-bar{
	height: 70px;
}
.slide-bar li{
	list-style:none;
	line-height: 70px;
	text-align: center;
	box-sizing: border-box;
	border: 1px solid powderblue;
	background: tomato;
}