2
\$\begingroup\$

I'm a beginner in js and jQuery. I wrote animation tab-slider. But my code is bad. What should I improve? What should I do to make the code less cumbersome?

var slideTabImg = $('.js-slide-tabImg');
var firstTab = $('#js-first-tabImg');
var secondTab = $('#js-second-tabImg');

$('#js-first-tab').click(function(){
    $(this).next().removeClass('m-slideTa href');
    $(this).addClass('m-slideTab-href');

    slideTabImg.removeClass('m-slide-tabImg_active');
    slideTabImg.removeClass('m-secondTab-active m-firstTab-active');

    secondTab.addClass('m-secondTab-active');
    firstTab.addClass('m-slide-tabImg_active m-firstTab-active');
});

$('#js-second-tab').click(function(){
		$(this).prev().removeClass('m-slideTab-href');
		$(this).addClass('m-slideTab-href');

  	slideTabImg.removeClass('m-secondTab-active m-firstTab-active');
		slideTabImg.removeClass('m-slide-tabImg_active');
		
		secondTab.addClass('m-slide-tabImg_active m-firstTab-active');
		firstTab.addClass('m-secondTab-active');
});
.slide-tabImages {
	position: relative;
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
}
.slide-tabImg {
	position: absolute;
}
.m-slide-tabImg_active {
	top: 40px;
	left: -40px;
	z-index: 5
}
.slide-tab {
	padding: 30px 0;
}
.slideTab-href {
	font-size: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: normal;
	cursor: pointer;
	margin: 0 8px;
}
.slideTab-href:hover {
	text-decoration: none;
}
.slideTabLink {
	padding-top: 80px;
}
.m-slideTab-href {
	border-bottom: 1px dashed;
 }

.m-secondTab-active {
  animation: secondTab-animation 2.5s forwards;
}

.m-firstTab-active {
  animation: firstTab-animation 2.5s forwards;
}

@keyframes secondTab-animation {
  49% {
    transform: translateX(-120px);
  }
  
  to {
    transform: translateX(0);
    z-index: 1;
  }
}

@keyframes firstTab-animation {
  49% {
    transform: translateX(120px);
  }
  
  to {
    transform: translateX(0);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class=" slideTabLink">
	<a id="js-first-tab" class=" slideTab-href m-slideTab-href">New</a>
	<a id="js-second-tab" class=" slideTab-href">Old</a>
</div>
			
<div class=" slide-tab js-slide-tab">
	<div class=" slide-tabImages">
	<div class=" slide-tabImg m-slide-tabImg_active js-slide-tabImg" id="js-first-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb68da321d060058111.png" alt="">
		</div>
		<div class=" slide-tabImg js-slide-tabImg" id="js-second-tabImg">
			<img src="https://habrastorage.org/webt/5a/fe/b6/5afeb6aea3f83085649799.png" alt="">
		</div>
	</div>
</div>

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.