javascript - jQuery循环显示div 2秒然后隐藏4秒

Question

这个问题已经有答案了:

What is the difference between a function call and function reference? (6 个回答)

已关闭 6 年前。

如何无限循环地显示一个div 2秒然后隐藏它4秒？我使用 jQuery 的 animate()函数，因为我也想使用 CSS 过渡。

function animatedText() {
    setTimeout(function() {
        $('.text').animate({ opacity: 1 }, 200, function() {
            setTimeout(function() { 
                $('.text').animate({ opacity: 0 }, 200);
            }, 1800);
        });
    }, 3800);
}
setInterval(animatedText(), 6000);

这是我的 fiddle :https://jsfiddle.net/od6gm8t3/

Answer 1

希望这对您有帮助。请检查下面的代码。

function animatedText() {
    $('.text').animate({ opacity: 1 }, 200, function() {
            setTimeout(function() { 
                $('.text').animate({ opacity: 0 }, 200);
            }, 2000);
    });
    setTimeout(function() {
        animatedText();
    },6000);
}
animatedText();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<i class="text">Animated Text</i>