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的最左值和最左值，而是将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/