jquery - How do i hide content before calling a jquery text effect plugin?

Question

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)

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>

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.

Answer 1

Using CSS, hide the element before the plugin runs:

.storycontent{
    visibility:hidden;
}

Here's an example: http://jsfiddle.net/n1ck/3hjvj/1/

Answer 2

Please set up jsfiddle with the code so we can experiment. Did you try simply setting the CSS of 'storycontent' to 'display: none' defaultly? I would assume textillate would know how to show it.

Answer 3

I know it's a bit old, but here's a piece of info worth considering.

If the animation is set for each character, hide the visibility per character. In addition to N1ck's answer (which it's correct), add this

.storycontent span{
     visibility:hidden;
}