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

通过这种方式，您可以设置特定位置的动画，而不是从当前位置添加或减去。

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

1 个答案: