Question

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

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

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

http://jsfiddle.net/a7Nck/

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

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

修改

我只想到一个解决方案：在触发动画之前获取正文的宽度，然后使用正文大小和动画应该执行的操作之间的最小值来设置top和left的动画。。问题是这会影响动画速度。

Answer 1

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

.animate（）的第二个版本提供了一个步骤选项 - 在动画的每一步触发的回调函数。此功能对于启用自定义动画类型或在动画发生时更改动画非常有用。它接受两个参数（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);

Fiddle

Answer 2

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

$('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/

Answer 3

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

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

请参阅DEMO

Answer 4

只要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/

jQuery - 删除元素，如果存在体区

4 个答案: