Using jQuery with toggle events

I'm using some jQuery UI for a div that toggles on and off the screen. On document load the div object is on the screen. It works great but I was wondering if there was a way to set it so that it is hidden on document load, then the user would have the ability to click a button to make it appear.

I tried having the funct开发者_运维百科ion run on document.ready, but that didn't seem to work. Here is the code directly from the jQueryUI.

$(function() {
        // run the currently selected effect
        function runEffect() {
            // get effect type from 
            var selectedEffect = "slide";

            // most effect types need no options passed by default
            var options = {};
            // some effects have required parameters
            if ( selectedEffect === "scale" ) {
                options = { percent: 0 };
            } else if ( selectedEffect === "size" ) {
                options = { to: { width: 200, height: 60 } };
            }

            // run the effect
            $( "#effect" ).toggle( selectedEffect, options, 500 );
        };

        // set effect from select menu value
        $( "#button" ).click(function() {
            runEffect();
            return false;
        });
    });

Put this in your CSS. This will set it to hidden by default.

#effect{
 display:none;
}

the CSS solution above is the right way, but if you feel like doing it with javascript...

$(function() {
    $("#effect").hide();
});