Question

我正在使用每个和动画逐个呈现图像。在显示最后一张图像后，我想在fx 6秒的短暂停顿后重复显示所有图像。

我尝试过与setTimeout的组合，但我必须遗漏一些东西 - 这是我正在使用的代码：

var viewport_height = $(window).height() - 100;
$('section#slide_art').css({ 'height' : viewport_height });

$('img.img_slide_this').each(function(slide_this) {
    var get_img_height = $(this).height(); 
    $(this).css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height });

    $(this).delay(3000 * slide_this).animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing')
        .delay(1500).animate({  'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing').fadeOut();          
});

更新为答案 我设法通过一些修改来解决我的问题 - 如果其他人可能有兴趣，我会发布帖子：

function run_slider() {

        var viewport_height = $(window).height() - 100;
        $('section#slide_art').css({ 'height' : viewport_height });

        $('img.img_slide_this').each(function(slide_this) {         
            var get_img_height = $(this).height(); 
            $(this).css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height });

            $(this).delay(3000 * slide_this).animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing')
                .delay(1500).animate({  'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing');                    
        });

        // 2 x images
        // setTimeout(run_slider, 7500); 

        // 4 x images
        setTimeout(run_slider, 15000); 

        // 8 x images
        // setTimeout(run_slider, 30000);

} 

run_slider();

Answer 1

如果您的图像列表没有变化，那么组织您想要的内容的最佳方式可能是激活单个图像的功能，然后触发回调中的下一个动画。这是一个例子：

    var viewport_height = $(window).height() - 100;
    $('section#slide_art').css({ 'height' : viewport_height });

    var images = $('img.img_slide_this');
    var animateImage = function(index) {
        if (index > images.length) { return; }
        var image = $(images.get(index));
        var get_img_height = image.height();
        image.css({ 'width' : '0', 'margin-left' : '50%', 'height' : get_img_height, 'max-height' : viewport_height });

        image.animate({ 'opacity': '1', 'margin-left' : '0', 'width' : '100%' }, 700, 'swing')
            .delay(1500).animate({  'height' : get_img_height, 'width' : '0', 'margin-left' : '50%'}, 700, 'swing')
            .fadeOut(function() {
                if (index < images.length - 1) {
                    animateImage(index + 1);
                } else {
                    setTimeout(function() {
                        animateImate(0);
                    }, 6000)
                }
            });     
    };
    animateImage(0);

注意回调添加到最终淡出，或者在淡出完成后立即触发下一个图像，或等待然后再次触发第一个图像。

在我看来，好像你的最终动画和淡出同时运行，所以如果这看起来不太正确，你可能希望将回调附加到最后一个动画，而不是淡出。

在每个函数内重复动画

1 个答案: