2

我正在使用 jQuery animate 来更改页面上多个元素（装饰元素）的位置。如果元素退出body区域，我希望元素被删除。（如果left大于body width或top大于body height）。

在我的情况下不能使用以下内容：

  • 为身体隐藏溢出
  • 手动为元素设置动画。我想使用 jQuery animate 来保持简单（我动态地创建元素，为它们设置动画然后我不关心它们，不跟踪它们，当动画完成时它们有一个 .remove() 方法）

http://jsfiddle.net/a7Nck/

所以在这个 JSfiddle 中，我希望红色 div 在到达右边缘时消失，body这样就不会出现滚动条。

例如，是否没有任何 CSS3 媒体查询，以便如果 div 不在视口中，它将被隐藏？

编辑：

我只是想到了一个解决方案：在触发动画之前获取主体的宽度，然后top通过left使用主体大小和动画应该做什么之间的最小值来设置动画。问题是这会影响动画速度。

4

4 回答 4

4

您可以使用动画的step功能。

.animate() 的第二个版本提供了一个 step 选项——一个在动画的每一步触发的回调函数。此函数对于启用自定义动画类型或更改正在发生的动画很有用。它接受两个参数（now 和 fx），并将其设置为动画的 DOM 元素。

var w = $(window).width()
$('div').animate({
    left: '20px'
}, 500).delay(1000).animate({
    left: '2000px'
}, {
    step: function(now, fx) {
        if (now > w) {
            $(fx.elem).remove()
        }
    }
}, 1000);

小提琴

于 2012-08-28T17:49:55.377 回答
2

一种可能的解决方法（假设您的第一个限制是关于全局添加overflow: hiddenCSS）：overflow: hidden在动画开始时使用 js 添加，并在动画结束时将其删除：

$('body').css('overflow', 'hidden');
$('div').animate({left: '20px'},400).delay(1000).animate(
    {left: '2000px'},1000, false, function(){ 
    $(this).hide();
    $('body').css('overflow', 'auto');
});​

http://jsfiddle.net/a7Nck/3/

于 2012-08-28T17:50:28.227 回答
0

当最后一个动画完成时隐藏 div 即

$('div').animate({left: '20px'},400).delay(1000).animate({left: '2000px'},1000, function(){ $(this).hide(); });

见演示

于 2012-08-28T17:45:17.697 回答
0

一旦 div 离开可见区域，滚动条就会出现。如果要防止滚动条出现，就不能让 div 离开屏幕。这是我的解决方案：

$('div')
    .animate({left: '20px'},400)
    .delay(1000)
    .animate(
        {left: ($(window).width()-$('div').width()) + "px"},
        1000,
        null, // default easing
        function() { $('div').hide() }
    );

jsfiddle：http: //jsfiddle.net/j4rdA/1/

​</p>

于 2012-08-28T17:49:56.117 回答