How to animate an “:after” using CSS or jQuery


Tags: jquery,css,css3

Problem :

I have a menu that lools like this: Fiddle.

$(".squ").click(function() {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});
.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
.squ:hover {
  background-color: #419EE6;
}
.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}
.sec1 .squ {
  cursor: pointer;
}
.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}
.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}
.pen:after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>

<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>

When clicking on one of the list items I switch between 2 classes. The selected one gets a class (.pen) that has an :after (CSS) that looks like an arrow.

How can I animate it as if it's going out of the div (from left to right)



Solution :

You need to already have it defined. And then use the position to animate. display and similar things cannot be animated (see CSS Animatable Properties). Also what you are trying to do is similar to bringing something from display: none to display: block.

So what I am doing here is:

  1. Change .pen p::after to p::after with z-index: -1 and right: 15px, a value more than its width.
  2. Animate the right property to right: 15px; or somewhere it correctly matches.
  3. Corrected the top: 0; property.
  4. To make this working always, delegate the events to the possible static parent. You are assigning to the class, which changes from clicking. So it is not static.

Working Snippet

$(document).on("click", ".squ", function () {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});
.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

.squ:hover {
  background-color: #419EE6;
}

.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}

.sec1 .squ {
  cursor: pointer;
}

.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}

.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}

p::after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  right: 15px;
  z-index: -1;
  top: 0;
}

.pen p::after {
  right: -20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>
<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>


    CSS Howto..

    Show header when at top of page - Scroll event re-firing issue

    How to do grid of div elements?

    How to set overlay on a page according to page height using CSS

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to enlarge and shrink an element in a loop animation through jquery or CSS

    Show a
  • line like is hovered
  • HTML And CSS and Javascript: How to make a onclick even remove text in input text fields

    How do I simultaneously open child and sub-child of a parent, in jQuery accordion menu, when parent is clicked?

    CSS How to multiple background + gradient?

    How can I create this button in CSS3?

    How can I create the shape of side mirrors of a truck/lorry?

    How to Move Bing Maps Menu to the Right side of Screen

    How to output element.style.marginTop using digits only?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to use CSS to select an element only if a specific element comes after the one you want to select?

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    Keeping content “fixed” under slideshow of different image sizes

    How to apply remaining width to a div in the middle of 2 other divs

    How to apply a complex style to the selection of a Select2 component?

    How to apply Hovering on html area tag?

    How to ensure that columns are contained within a row

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to encapsulate CSS, especially for popups and no iframe involved?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    How to use relative referencing in CSS files

    How to get right sidebar up on main content on resize of flexible with page?

    How to put a space in front of a next line [closed]

    how to select margin for a background image in CSS/CSS3?

    How to force html/css padding/margin on an element?

    How to get CSS triangles to display in a row instead of vertical