在调用jQuery文本效果插件之前，如何隐藏内容? [英] How do i hide content before calling a jquery text effect plugin?

问题描述

我对jQuery非常陌生，我正在尝试使用一个名为Textillate的jQuery文本效果插件. (可在此处找到文档: https://github.com/jschr/textillate )

I'm very new to jQuery and I'm trying to use a jQuery text effects plugin called Textillate. (documentation can be found here: https://github.com/jschr/textillate)

问题在于网站上的inEffects属性描述没有描述在效果发生之前如何隐藏内容.我已将initialDelay设置为6000，这意味着效果在页面加载后6000毫秒发生.不幸的是，文本在这6000毫秒内显示，我需要将其隐藏起来，直到效果开始.我以为inEffects['hidden']可以工作，但是不行.有没有人有什么建议?我的完整脚本如下:

The problem is that the inEffects property description on the website doesn't describe how to hide the content before the effect takes place. I have set initialDelay to 6000, which means the effect happens 6000ms after the page loads. Unfortunately, the text is shown during these 6000ms and I need it to be hidden until the effect begins. I assumed that inEffects['hidden'] would work, but it doesn't. Does anyone have any suggestions? My full script is listed below:

<script type="text/javascript">
                        $(function textillate() {
                            $('.storycontent').textillate(
                                    {
                                        initialDelay: 6000,
                                        inEffects: ['hidden'],
                                        in: {
                                            effect: 'rotateInDownLeft'
                                        }
                                    });
                        });
</script>

我也尝试使用$(.storycontent).hide(6000);，但这似乎也不是解决方案.效果似乎立即开始，然后内容逐渐消失.

I also tried using $(.storycontent).hide(6000); but that doesn't seem to be the solution either. It seems that the effect starts right away and then the content just fades away.

推荐答案

使用CSS，在插件运行之前隐藏元素:

Using CSS, hide the element before the plugin runs:

.storycontent{
    visibility:hidden;
}

这里是一个示例: http://jsfiddle.net/n1ck/3hjvj/1/

这篇关于在调用jQuery文本效果插件之前，如何隐藏内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！