setInterval- Javascript 不工作

Question

试图循环一个函数。

这是一个简单的文字动画 - 文字会

1.逐个字母淡入左侧

2.逐个字母淡出。

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

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

所以，我将延迟设置为 4700。动画按预期工作，但没有循环播放。

http://jsfiddle.net/y5C4G/3/

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

HTML：

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

JS：

$(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);           

    });

Answer 1

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

演示：http://jsfiddle.net/YKebf/9/

loadTextillate(jQuery);

$newSpan = $(".brand");
$newSpan.show().textillate({ in : {
        effect: 'fadeInLeft'
    },
    out: {
        effect: 'fadeOutUp',
        callback: function () {
            ShowBrand(); //set as a callback function
        }
    },
    loop: true
});

function ShowBrand() {

    var docHeight  = $(document).height();
    var docWidth   = $(document).width();
    var spanHeight = $newSpan.height();
    var spanWidth  = $newSpan.width();
    var maxHeight  = docHeight - spanHeight;
    var maxWidth   = docWidth - spanWidth;
    var newPosTop  = Math.floor(Math.random() * maxHeight);
    var newPosLeft = Math.floor(Math.random() * maxWidth);
    console.log("New Position",newPosTop,newPosLeft);
    $newSpan.css({
        top:newPosTop,
        left:newPosLeft 
    });
}

CSS：

.brand{
    position:absolute;
}

希望这会有所帮助。

Answer 2

编辑：正如naota所说，你可以设置回调。通过这样做，您将不需要任何 setInterval 并且在我的情况下您可能不必修改插件文件中的任何代码。查看更新的演示：http://jsfiddle.net/lotusgodkk/y5C4G/6/

与其在每个区间初始化textillate，不如直接改变span的top和left值，而是将loop:true添加到textillate。

JS：

$(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。 CSS：

.brand{position:absolute;}

演示：http://jsfiddle.net/lotusgodkk/y5C4G/6/