setInterval-Javascript不工作

尝试循环一个函数

这是一个简单的文本动画-文本将

1.一个字母一个字母地淡入左侧，然后

2.逐字淡出

3.这将重复，但文本将再次出现在屏幕上的另一个随机位置 页面

当我将间隔延迟设置为1000时，文本总共显示4次，每次间隔1秒。第一次，文本在左侧淡入显示，第二次和第三次，文本作为一个整体闪烁，最后，淡出一个字母一个字母地出现

因此，我将延迟设置为4700。动画按需要工作，但不循环

textillate中的回调函数也不起作用，所以我选择了setInterval

HTML:

<span class="brand">
                <h1>
                    <ul class="texts">
                        <li>E L Y S I U M</li>
                        <li></li>
                    </ul>
                </h1>
            </span>

$(window).bind("load", function () {

            function ShowBrand() {
            var docHeight = $(document).height();
            var docWidth = $(document).width();

            $newSpan = $(".brand");
            spanHeight = $newSpan.height();
            spanWidth = $newSpan.width();

            maxHeight = docHeight - spanHeight;
            maxWidth = docWidth - spanWidth;

            $newSpan.show().css({
                top: Math.floor(Math.random() * maxHeight), 
                left: Math.floor(Math.random() * maxWidth)
            }).textillate({
            in: {effect:'fadeInLeft'},
            out: {effect:'fadeOutUp'}
            });                
        }            

        setInterval(ShowBrand,4700);           

    });

---

我不太确定你想在动画中实现什么，但我想你想做的是这样的：

演示：

<span class="brand">
                <h1>
                    <ul class="texts">
                        <li>E L Y S I U M</li>
                        <li></li>
                    </ul>
                </h1>
            </span>

$(window).bind("load", function () {

            function ShowBrand() {
            var docHeight = $(document).height();
            var docWidth = $(document).width();

            $newSpan = $(".brand");
            spanHeight = $newSpan.height();
            spanWidth = $newSpan.width();

            maxHeight = docHeight - spanHeight;
            maxWidth = docWidth - spanWidth;

            $newSpan.show().css({
                top: Math.floor(Math.random() * maxHeight), 
                left: Math.floor(Math.random() * maxWidth)
            }).textillate({
            in: {effect:'fadeInLeft'},
            out: {effect:'fadeOutUp'}
            });                
        }            

        setInterval(ShowBrand,4700);           

    });

CSS:

---

希望这有帮助。

编辑：如naota所述，您可以设置回调。通过这样做，您将不需要任何

setInterval

，而且在我的例子中，您可能不需要修改插件文件中的任何代码。请参阅更新的演示：

与其在每个间隔中初始化

textillate

，不如只更改span的顶部和左侧值，而将

loop:true

添加到

textillate

JS:

此外，请确保已定位

.brand

。 CSS:

---

演示：

谢谢。这正是需要的，但我不想修改原来的textillate.js。还有别的吗way@user3615588谢谢我找到了一个好办法。您可以设置一个回调函数。谢谢，有一种神经质的效果。文本的下一个应用甚至在第一个文本完成动画之前就开始了（fadein+fadeout）。你可以在你的小提琴上检查这个。尝试增加秒数，但没有成功

$(window).bind("load", function () {
ShowBrand();
$('.brand').textillate({ in : {
        effect: 'fadeInLeft'
    },
    out: {
        effect: 'fadeOutUp',
        callback: function () {
            ShowBrand()
        }
    },
    loop: true,
});
});

function ShowBrand() {
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    $newSpan = $(".brand");
    spanHeight = $newSpan.height();
    spanWidth = $newSpan.width();
    maxHeight = docHeight - spanHeight;
    maxWidth = docWidth - spanWidth;
    $newSpan.show().css({
        top: Math.floor(Math.random() * maxHeight),
        left: Math.floor(Math.random() * maxWidth)
    });
}

.brand{position:absolute;}