除非元素位于特定位置，否则如果元素阻止动画

Question

我试图阻止动画触发，除非容器 div #opts 位于指定的“左侧”位置。

我尝试了 .offset() 和 .position() 方法，但无济于事。无论“左”位置是什么，元素都会继续向右或向左移动（取决于可见和单击的“选项卡”）。

在这个test page上，我已经放慢了动画的速度，这样你就可以自己试一试了……只需在动画开始和结束之间点击左上角的“文本选项卡”几次，然后它将继续向右/向左移动，无论其左侧位置如何。

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();
     });
  });

关于我做错了什么或防止动画将标签完全移出屏幕或向右太远的更好方法的任何想法？

Answer 1

尝试使用left: "100px" 和left: "0px" 而不是+=100px 和-=100px

这样，您将动画到特定位置，而不是从当前位置添加或减去。