javascript - 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;
}

希望这有帮助。