Jquery：如何：当显示 UL 时，让第一个 LI 动画“左”； 20px，然后到 0px，然后让第二个 LI 执行此操作，然后是第三个，依此类推

发布于 2024-09-15 11:48:54 字数 428 浏览 9 评论 0原文

当 UL.chapters 为“slideDown”时，让第一个“chapters LI”将“left”属性设置为 20px，然后设置为 0px，然后让第二个 LI 执行相同的操作，然后让第三个 LI 执行相同的操作，依此类推。使用我的代码，它们都在 UL.chapters 滑落后直接进行动画处理，我如何让它们一次执行一个动画，第二个直到第一个完成后才开始，等等

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

代码更新。

原文

When UL.chapters is 'slideDown', have the first 'chapters LI' animate the 'left' property to 20px, then animate back to 0px, then have the second LI do the same thing, then have the third, and so-on. with my code, they all animate directly after UL.chapters slides down, how do I make them do their animation 1 at a time, with the second not starting until the first has finished, etc.

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

code updated.

分享到QQ

分享到微博

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

发布评论

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

还给你自由 2024-09-22 11:48:54

试试这个：

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}

这会在第一个

上调用幻灯片动画函数，然后在将其滑回起始位置的动画的回调中，它会在下一个 上调用该函数

。

这是一个实际演示：http://jsfiddle.net/CBNgR/

Try this:

$(function() {
    $('h1').click(function() {
        $('.chapters').slideDown(500, function() {
            doSlide($('.chapters li:first'));
        });
    });

});


function doSlide(current) {
    $(current).animate({
        'left': '20px'
    }, function() {
        $(current).animate({
            'left': '0px'
        }, function() {
            doSlide($(current).next('li'));
        });
    });
}

This calls the slide animation function on the first <li> and then in the callback for the animation that slides it back to the starting position, it calls the function on the next <li>.

Here's a demo of it in action: http://jsfiddle.net/CBNgR/

回复收藏 0 原文

素罗衫 2024-09-22 11:48:54

您是否注意到代码的第四行是 $('chapters LI') 而不是 $('.chapters LI')？

而且你在这里重复自己。试试这个：

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

还要确保您的 LI 设置为绝对位置，否则您的左侧动画将会出现问题。

Have you noticed the 4th line of your code is $('chapters LI') instead of $('.chapters LI')?

Also you're repeating yourself here. Try this:

$('h1').click(function() {
    $('UL.chapters').slideDown(500);
    $('.chapters LI').each(function() {
        $(this).animate({'left':'20px'});
        $(this).animate({'left':'0px'});
    });
});

Also make sure that your LIs are set to position absolutely, or else your left animate will have issues.

回复收藏 0 原文

~没有更多了~