Apply transition to div

Question

I have 3 divs positioned next to each other, and background div. We'll call the background div bg div. Whenever one of the 3 divs get selected, the bg div gets positioned on top of the selected div. (Basically, something like a segmented controller.)

When I try making the bg div transition to its new position. I did the following to transition:

transition: left linear .2s;

When you select a div for the first time, the animation doesn't happen, but the bg div does move over to its correct position (just without the animation). After the second click and on, it works.

How can I add a transition to the bg div?

JSFiddle

$('.inner').click(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});

#wrapper {
  width: 600px;
  height: 30px;
  position: relative;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: -1;
  width: calc(100% / 3);
  position: relative;
  transition: left linear 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Possibly duplicate of http://stackoverflow.com/questions/18440393/css-transition-does-not-work-on-top-property-in-ff/18441215#18441215. Set an initial value for the `left` property of `#back`. That thread indicates only FF but the reason is applicable for Webkit and others too. — Harry, Nov 24 '15 at 06:17
just add left:0; to #back{left:0;} http://jsfiddle.net/mohamedyousef1980/weaw5v3o/1/ — Mohamed-Yousef, Nov 24 '15 at 06:20
@Harry I wouldn't call the question a duplicate because the actual question is different. It happens to be the answer stated there also works for me. — Jessica, Nov 24 '15 at 06:23
@Jessica: I disagree because the core reason is the same but I'd leave it to the community to vote on. — Harry, Nov 24 '15 at 06:24
@Harry You're right! The core problem is the same. I'm with you on this one! :-) — Jessica, Nov 24 '15 at 06:26

score 1 · Accepted Answer · answered Nov 24 '15 at 06:25

For a transition to take effect, there should be an initial value defined from which the animation would start.

Here #back does not have an initial left value due to which on the first click, it would jump directly to the left position defined on click. This will take be the initial value for the next transition and hence from then on you would see the animation in transition.

So all you need to do is add left:0px; in css for #back.

Hope this helped.

score 0 · Answer 2 · answered Nov 24 '15 at 06:38

You should add left: 0; property for css #back

$('.inner').click(function() {
  var pos = $(this).position();
  $("#back").css('left', pos.left + "px");
});

#wrapper {
  width: 600px;
  height: 30px;
  position: relative;
}
.inner {
  display: block;
  float: left;
  width: calc(100% / 3);
  height: 50px;
}
#back {
  background-color: yellow;
  height: 100%;
  z-index: -1;
  width: calc(100% / 3);
  position: relative;
  transition: left linear 1s;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="inner">First Option</div>
  <div class="inner">Second Option</div>
  <div class="inner">Third Option</div>
  <div id="back"></div>
</div>

Apply transition to div

JSFiddle

2 Answers2