0

每当将窗口大小调整为 PC 和移动视图时，我都想为我的标题设置动画，但 Textilate 仅在重新加载时执行。

这是我的代码：

function animateHeading() {
    $('#skysea').textillate({ 
        in: { effect: 'fadeInRight' } 
    });
    $('#on').textillate({ 
        initialDelay: 300,
        in: { effect: 'fadeInRight' } 
    });
    $('#cloud').textillate({ 
        initialDelay: 500,
        in: { effect: 'fadeInRight' } 
    });
}

$(window).resize(function() {
    if($(window).width() < 769) {
        animateHeading();
    }
    if($(window).width() >= 769) {
        animateHeading();
    }
});

我想在将窗口大小调整为 pc 或移动视图而不重新加载页面时为文本设置动画。

4

1 回答 1

1

根据文档：

$element.textillate('start')- 手动启动/重启 textillate

此外，当您检查宽度是否小于 769 ，然后检查它是否等于或大于 769 时，您的resize功能总是会调用。animateHeading

这是一个活生生的例子（我已经将textillate选择器/选项移动到一个全局变量中，以便两个函数都可以访问它）：

$(function() {
    // key/val object of selector => textillate options
    var animations = {
        '#skysea': {
            in: { effect: 'fadeInRight' }
        },
        '#on': {
            in: { effect: 'fadeInRight' }
        },
        '#cloud': {
            initialDelay: 500,
            in: { effect: 'fadeInRight' }
        }
    }

    // call textillate using selector/options
    function animateHeading() {
        for (var selector in animations) {
            $(selector).textillate(animations[selector]);
        }
    }

    // call .textillate('start') to start/restart animation as per documentation
    function restartAnimations() {
        // get the selectors as a single string, i.e. "#skysea,#on,#cloud"
        var selectors = Object.keys(animations).join(",");

        $(selectors).textillate('start');
    }

    // animate headings on page load
    animateHeading();

    // bind restartAnimations function on window resize
    $(window).resize(function() {
        restartAnimations();
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js" integrity="sha256-Tvi6rQj7jAzxY1J8UaFlagR6+ZtWVctieK8pFawiY8Q=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js" integrity="sha256-7sov0P4cWkfKMVHQ/NvnWVqcLSPYrPwxdz+MtZ+ahl8=" crossorigin="anonymous"></script>

<p id="skysea">Lorem ipsum dolor sit amet.</p>
<p id="on">Lorem ipsum dolor sit amet.</p>
<p id="cloud">Lorem ipsum dolor sit amet.</p>

于 2019-09-02T14:54:56.770 回答