Question

我正在使用视口检查器，我希望动画只运行一次，到目前为止，我有以下内容： -

jQuery('#style-wrapper').viewportChecker({
    callbackFunction: function(elem) {
        var flag = true;
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Different');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "700" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#7ec4bf");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#14143a");
        },1000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Distinct');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "900" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#14143a");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#FFFFFF");
        },2000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('People');
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#b0a893");
        },3000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Want');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "900" );
            jQuery('.page-template-template-homepage .work-description').css( "font-size", "54px" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#39779f");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#14143a");
        },4000);
        if (flag) {
            interval = setInterval(function(){
                flag = false;
            },5000);
        }
    }
});

但由于某种原因它会一遍又一遍地循环（并且出于某种未知的原因，当它第二次循环时它以不同的顺序开始循环）。

有什么想法吗？

Answer 1

需要将

setInterval设置为变量才能正确清除。这是我要解释的快速demo。

var myInterval;

$('button[name="start"]').click(function(){
    myInterval = setInterval(function(){
        $('body div').prepend('Oh Hai! ');
    });
});

$('button[name="end"]').click(function(){
    clearInterval(myInterval);
});

作为附注，我可以问你为什么要创建一个间隔/循环，如果你只想要它被调用一次？

试试这个：

if (flag) {
    clearInterval(interval);
}

修改：

所以我最初想的是你可以使用animate()方法通过它的回调实现这一点，但后来我意识到你试图改变的一半样式不接受没有插件的动画。我想出的内容为您提供了4个阶段的CSS样式/动画选项。每个阶段都嵌套在animate()方法的回调中。它将通过html()方法更改文本字符串，并通过css()或animate()方法调整您拥有的任何样式更改。时间存储在动画对象中，可以轻松调整。显然你仍然需要做一些工作来修改它以满足你的确切需求，但希望这可以让你开始！

DEMO

var anim = {
    config: {
        slideDelay: 1000,   // Each step will take 1 second
        intervalDelay: 8000 // The entire loop will wait 8 seconds between iterations
    },
    run: function(selector){ 
        console.log('test');
        $('.selector').html('Different').css({ // Change any CSS Components (Stage1)
            'background'    : '#7ec4bf',
            'color'         : '#14143a',
            'font-size'     : '20px'
        }).animate({ // Option to animate components (Stage1)
            'font-weight'   : 400
        }, anim.config.slideDelay, function(){
            $('.selector').html('Distinct').css({ // Change any CSS Components (Stage2)
                'background'    : '#14143a',
                'color'         : '#FFFFFF',
                'font-size'     : '10px'
            }).animate({ // Option to animate components (Stage2)
                'font-weight'   : 600
            }, anim.config.slideDelay, function(){
                $('.selector').html('People').css({ // Change any CSS Components (Stage3)
                    'background'    : '#b0a893'
                }).animate({ // Option to animate components (Stage3)
                    'font-weight'   : 900
                }, anim.config.slideDelay, function(){
                    $('.selector').html('Want').css({ // Change any CSS Components (Stage4)
                        'background'    : '#39779f',
                        'color'         : '#14143a',
                        'font-size'     : '30px'
                    }).animate({ // Option to animate components (Stage4)
                        'font-weight'   : 100
                    }, anim.config.slideDelay);
                });
            });
        });
    }
};

var test = setInterval(anim.run, anim.config.intervalDelay);

Viewport Checker - jQuery运行循环一次

1 个答案: