Question

尝试循环功能。

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

1.逐字逐句淡出，然后

2.逐字逐句消失。

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

当我将间隔延迟设置为1000时，文本总共出现4次，每次间隔为1秒。第一次，文字显示左边淡出，第二次和＆amp;第三，文本整体闪烁，最后，逐渐淡出淡出。

因此，我将延迟设置为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/

为什么不改变span的top和left值，而是将textillate添加到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/

setInterval- Javascript无效

2 个答案: