0

我需要使用 Jquery animate 函数相对于其父级移动绝对 div。如何限制 CSS 对象文字 left += -600px 以便左侧定位在到达宽度末端时停止？换句话说，我想限制元素的左侧定位，这样它就不会一直移动到页面之外和视线之外。谢谢您的帮助

4

4 回答 4

2 
$(this).animate({'left': '-'+$(this).parent().width()}, [time in ms]);

或者，如果您的意思是元素自己的宽度：

$(this).animate({'left': '-'+$(this).width()}, [time in ms]);
于 2012-06-28T13:23:15.067 回答
0

为了使它在父级中对齐，您需要从父级宽度中减去子级宽度，如下所示：

$(document).ready(function(){
var childWidth = $('#child').width();
var parWidth = $('#child').parents('#parent').width();
var offSet = parWidth - childWidth;

$('#child').animate({
    left: '+=' + offSet  
}, 1000);

});

示例 HTML：

<div id="parent">
    <div id="child">
      I've been a bad child.  
    </div>    
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}
#parent {
  width: 600px;
  height: 200px;
  background: green;  
  position: relative;  
}

#child {
  position: absolute;
  background: red;
  width: 100px;
  height: 200px;        
}

请参阅此 JSFiddle进行演示。

于 2012-06-28T13:37:33.397 回答
0

您可以使用 jQueryanimate的step-function 在每一步检查元素是否已到达页面边缘并应停止。这里是一个小提琴，演示了使用 step 函数在达到限制时停止动画。

 ...animate({left: '+=-600px'},
   {
     ... ,
     step: function(now, fx) {
       if (fx.now <= 0) { // If the current animation value is less than zero
         $(fx.elem).stop();
         $(fx.elem).style('left', '0');
       }
     }
     ...
   }   
 );

如果需要，step 函数为您提供了一种逐步控制动画的好方法。阅读此处了解更多信息。

于 2012-06-28T13:24:27.320 回答
-1

好吧，您没有提供任何代码，所以我唯一的猜测是您误解了 jQuery 的 animate 函数的工作原理。实际上 jQuery 的 animate 函数正是你想要的。它会将您想要的元素的属性增加到不超过您想要的属性。也就是说，除非您愿意，否则它不会一直将其移出页面并移出视线。在这里阅读它是如何工作的。

于 2012-06-28T13:23:01.787 回答