按顺序对每个（）返回的元素进行动画处理

发布于 2024-09-09 04:12:38 字数 478 浏览 9 评论 0原文

我正在使用此脚本对锚点内的一些图像进行动画处理：

$('#locations a').each(function() {
        // set opacity 0 take initial position
        $(this).css('opacity', '0');
        var left = $(this).css('left');
        var top = $(this).css('top');

        // reset position and animate
        $(this).css({'left' : '0', 'top' : '0'});
        $(this).animate({left: left, top: top, opacity: 1});
    });

我需要使用 jqueryeach() 函数来获取初始位置。但是，我想按顺序对返回的元素进行动画处理。这可能吗？

原文

I'm using this script to animate some images inside anchors:

$('#locations a').each(function() {
        // set opacity 0 take initial position
        $(this).css('opacity', '0');
        var left = $(this).css('left');
        var top = $(this).css('top');

        // reset position and animate
        $(this).css({'left' : '0', 'top' : '0'});
        $(this).animate({left: left, top: top, opacity: 1});
    });

I need to use the jquery each() function to take the initial position.
However, I want to animate the returned elements in order. Is that possible?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

命硬 2024-09-16 04:12:38

您可以通过一种不太复杂的方式来完成此操作，如下所示：

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top');

    $(this).css({opacity: 0, left: 0, top: 0})
           .delay(400 * i)
           .animate({left: left, top: top, opacity: 1});
});

您可以在此处进行测试。主要是简化，唯一重要的添加是 .delay(400 * i) 和 i 到 function(i) {。

这仅使用作为第一个参数提供给 .each() 的 i 的回调并乘以 .delay() （在此元素上启动动画之前的延迟）乘以每个元素的该数量。 400 用于默认持续时间的 .animate() 为 400 毫秒。因此第一个元素立即开始，下一个元素在 400 毫秒后开始，下一个元素在 800 毫秒后开始，依此类推……正好在它之前的动画应该完成的时候开始。

您当然可以创建一个自定义队列等...但这似乎更简单:)

编辑：因为您对构建队列感兴趣，所以它看起来像这样：

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top'),
        a = $(this).css({opacity: 0, left: 0, top: 0});

    $(document).queue('myQueue', function(n) {
      a.animate({left: left, top: top, opacity: 1}, n);
    });
});
$(document).dequeue('myQueue');

您可以在这里测试，我们使用的是 .queue() 将函数在 document 上的自定义队列中排队，然后用 .dequeue()。 n 是队列中的下一个函数，当 < code>.animate() 通过将其提供为要运行的回调函数来完成。

You can do this in a not-so-complicated way, like this:

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top');

    $(this).css({opacity: 0, left: 0, top: 0})
           .delay(400 * i)
           .animate({left: left, top: top, opacity: 1});
});

You can test it here. It's mostly simplification, the only important additions are .delay(400 * i) and the i to function(i) {.

This just uses the i provided as the first parameter to .each()'s callback and multiplies the .delay() (delay before starting animation on this element) times that amount for each element. The 400 is for the default duration of .animate() being 400ms. So the first element starts immediately, the next in 400ms, the next in 800ms, and so on...right when the animation prior to it should be finishing.

You can of course make a custom queue, etc...but this seems a bit simpler :)

Edit: since you're interested in building the queue, it'd look like this:

$('#locations a').each(function(i) {
    var left = $(this).css('left'),
        top = $(this).css('top'),
        a = $(this).css({opacity: 0, left: 0, top: 0});

    $(document).queue('myQueue', function(n) {
      a.animate({left: left, top: top, opacity: 1}, n);
    });
});
$(document).dequeue('myQueue');

You can test it here, we're using .queue() to queue the functions in a custom queue up on document then kicking it off with a .dequeue(). The n is the next function in the queue, we're calling that when the .animate() finishes by providing it as the callback function to run.

回复收藏 0 原文

↘人皮目录ツ 2024-09-16 04:12:38

您可以在 jQuery 中设置自己的自定义队列。

http://api.jquery.com/queue/

用您想要的所有功能填充您的队列执行。
1. 队列中的每个函数都是一个动画。
2. 使用each()循环填充队列。
启动队列以开始第一个动画。
在每个动画函数的回调中，调用 dequeue() 函数来启动下一个动画。

基于您的评论的示例

我创建了一个名为“MyCustomQueue”的自定义队列，并任意将其放在 body 标记上。我使用 JavaScript 闭包通过设置名为“this$”的变量来对队列的每个函数中的特定元素进行动画处理。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Queues Me</title> 
    <style> 
        a { 
            position:relative;
            top:0;
            left:0;
        }
    </style> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

        $(function () {

            $('#locations a').each(function () {

                var this$ = $(this);

                // set opacity 0 and take initial position 
                this$.css('opacity', '0');
                var left = this$.css('left');
                var top = this$.css('top');


                // reset position and populate the queue with animations 
                this$.css({ 'left': '420px', 'top': '1820px' });

                $('body').queue("MyCustomQueue", function () {
                    this$.animate({ left: left, top: top, opacity: 1 }, 500, function () {
                        $('body').dequeue("MyCustomQueue");
                    });
                });
            });

            $('body').dequeue("MyCustomQueue");

        });

    </script> 
</head> 
<body> 
    <div> 
        <div id="locations"> 
            <ul> 
                <li><a href="#">Foo</a></li> 
                <li><a href="#">Moo</a></li> 
                <li><a href="#">Poo</a></li> 
                <li><a href="#">Woo</a></li> 
                <li><a href="#">Zoo</a></li> 
            </ul> 
        </div> 
    </div> 
</body> 
</html>

You can setup your own custom queue in jQuery.

http://api.jquery.com/queue/

Populate your queue with all the functions you want to execute.
1. Each function in the queue is a single animation.
2. Use your each() loop to populate the queue.
Start the queue to kickoff the first animation.
In the callback for each animation function, call the dequeue() function to start up the next animation.

Example based on your comment

I created a custom queue named "MyCustomQueue" and I arbitrarily put it on the body tag. I used a JavaScript closure to animate a specific element in each function of the queue by setting a variable named "this$".

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Queues Me</title> 
    <style> 
        a { 
            position:relative;
            top:0;
            left:0;
        }
    </style> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript"> 

        $(function () {

            $('#locations a').each(function () {

                var this$ = $(this);

                // set opacity 0 and take initial position 
                this$.css('opacity', '0');
                var left = this$.css('left');
                var top = this$.css('top');


                // reset position and populate the queue with animations 
                this$.css({ 'left': '420px', 'top': '1820px' });

                $('body').queue("MyCustomQueue", function () {
                    this$.animate({ left: left, top: top, opacity: 1 }, 500, function () {
                        $('body').dequeue("MyCustomQueue");
                    });
                });
            });

            $('body').dequeue("MyCustomQueue");

        });

    </script> 
</head> 
<body> 
    <div> 
        <div id="locations"> 
            <ul> 
                <li><a href="#">Foo</a></li> 
                <li><a href="#">Moo</a></li> 
                <li><a href="#">Poo</a></li> 
                <li><a href="#">Woo</a></li> 
                <li><a href="#">Zoo</a></li> 
            </ul> 
        </div> 
    </div> 
</body> 
</html>

回复收藏 0 原文

~没有更多了~