Question

I am trying to prevent an animation from firing unless the container div, #opts, is at a specified “left” position.

I’ve tried the .offset() and .position() methods but to no avail. The elements continue to move to the right or left (depending on which “tab” is visible and clicked) no matter what the “left” position is.

On this test page, I’ve slowed down the animation so that you can try it for yourself… just click the “text tab” in the upper left corner a few times between where the animation starts and ends and it will keep moving right/left, regardless of its left position.

JS:

$( "#optsdiv" ).hide();
$( "#closediv" ).hide();
var p = $( "#opts" );
var offset = p.offset();

if( offset.left == 0 )
  $( "#opendiv" ).click( function() {
    $( "#opts" ).animate( { left: "+=100px", opacity: 1 }, 1400, "easeOutExpo", function() {
       $( "#opendiv" ).hide();
       $( "#closediv" ).show();
      });
  });

if( offset.left == 100 )    
  $( "#closediv" ).click( function() {
    $( "#opts" ).animate( { left: "-=100px", opacity: 0.6 }, 1400, "easeOutExpo", function() {
      $( "#closediv" ).hide();
      $( "#opendiv" ).show();
     });
  });

Any ideas on what I’m doing wrong or a better way to prevent the animation from moving the tab off screen completely or too far to the right?

Answer 1

Try using left: "100px" and left: "0px" instead of +=100px and -=100px

This way you’re animating to specific positions instead of adding or subtracting from the current position.