CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user38208
user38208

Reputation: 1094

CSS Transition not working when removing class with jQuery

I am using using css transition to add an animated effected to my links when they are hovered over.

One of links needs to be underlined by default i.e when no other link is hovered over, it should remain underlined and when other links are hovered over, the underline in the first link should be removed. I have achieved this with jQuery by adding and removing a classs however, the animated effect is lost. Is there a way to get back this animated effect on the first link?

Also when the underline from the first link is removed, all other links seem to move up?

$(".c-f, .i-c, .c-u").hover(function() {
	$('.o-c').removeClass("default-underline");
}, function() {
    $('.o-c').addClass("default-underline");
});
body {
  background: black;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
}

.pivot-nav li a:hover::after {
  width: 100%;
}

.default-underline:after {
  width: 100%;
}

.pivot-nav li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.default-underline:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  background: #fff;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  position: relative !important;
  width: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="pivot-nav">
  <li class="pivot-nav-item"><a class="o-c default-underline" href="#">Our Company</a></li>
  <li class="pivot-nav-item"><a class="c-f" href="#">Link 1</a></li>
  <li class="pivot-nav-item"><a class="i-c" href="#">Link 2</a></li>
  <li class="pivot-nav-item"><a class="c-u" href="#">Link 3</a></li>
</ul>

Upvotes: 1

Views: 69

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206209

I'd use CSS-only:

Remove the underline from the preselected element if:

  • we're hovering the entire UL
  • we're not hovering the preselected element
.pivot-nav:hover a.default-underline:not(:hover):after {
  width: 0;
}

Example

body {
  background: black;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
}

.pivot-nav li a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  height: 4px;
  background: #fff;
  transition: width 0.3s ease 0s;
}

.pivot-nav:hover a.default-underline:not(:hover):after {
  width: 0;
}

.pivot-nav li a.default-underline:after,
.pivot-nav li a:hover:after{
  width: 100%;
}
<ul class="pivot-nav">
  <li class="pivot-nav-item"><a class="default-underline" href="#">Our Company</a></li>
  <li class="pivot-nav-item"><a href="#">Link 1</a></li>
  <li class="pivot-nav-item"><a href="#">Link 2</a></li>
  <li class="pivot-nav-item"><a href="#">Link 3</a></li>
</ul>

Upvotes: 1

Related Questions