Question

I was able to make a bar to animate to width 150px. Now I try to make it come back to its original position but only when it reaches the end. Why the conditional: if ($(‘#indicator’).width() > ‘149px’) doesn’t work? How to do this well?

$(function(){        
  $("#play").click(function() {
    $("#indicator").animate({"width": "150px"}, 8400);
  });

  // indicador back to 0
  if ($('#indicator').width() > '149px') {
      $("#indicator").animate({"width": "1px"}, 100);
  }
});

Here to check and play: http://jsfiddle.net/SwkaR/

Answer 1

Question 1

Your function for returning the indicator to it’s original position is fired immediately after the DOM is ready ($(function() { /* code for when the dom is ready */ });.

Question 2

Since Javascript is async, you should create a callback for your animation :

$(function(){

  $("#play").click(function() {
      $("#indicator").animate({"width": "150px"}, { duration: 8400, complete: function() {
          $("#indicator").animate({"width": "1px"}, 100);
      }});
  });

});

http://jsfiddle.net/zEwHx/