Sliding a div across to left and the next div appears
<p>I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function</p>

<pre><code>jQuery('input[name^=Next]').click(function () {
     current.animate({ marginLeft: -current.width() }, 750);
     current = current.next();
});
</code></pre>

<p>That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"&gt;&lt;/script&gt;    &lt;script type="text/javascript" language="javascript"&gt;

    (function ($) {
        $.fn.WikiForm = function (options) {

            this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
            var current = jQuery('.wikiform .view :first');
            function positionForm() {
                //jQuery('.wikiform').css( {'top':
                jQuery('body')
                    .css('overflow-y', 'hidden');
                jQuery('&lt;div id="overlay"&gt;&lt;/div&gt;')
                    .insertBefore('.wikiform')
                    .css('top', jQuery(document).scrollTop())
                    .animate({ 'opacity': '0.8' }, 'slow');
                jQuery('.wikiform')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
                    .css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
                    .css('width', jQuery('.wikiform .wizard .view:first').width())
                    .css('left', -jQuery('.wikiform').width())
                    .animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
                jQuery('.wikiform .wizard')
                    .css('overflow', 'hidden')
                    .css('height', jQuery('.wikiform .wizard .view:first').height() );

            }
            if (this.Mode == "Wizard") {
                return this.each(function () {

                    var current = jQuery('.wizard .view :first');
                    var form = jQuery(this);

                    positionForm();

                    jQuery('input[name^=Next]').click(function () {
                        current.animate({ marginLeft: -current.width() }, 750);
                        current = current.next();
                    });
                    jQuery('input[name^=Back]').click(function () {
                        alert("Back");
                    });

                });
            } else if (this.Mode == "CancelOk") {
                return this.each(function () {

                });
            } else {
                return this.each(function () {

                });
            }
        };
    })(jQuery);

    $(document).ready(function () {
        jQuery(window).bind("load", function () {
            jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
        });
    });
&lt;/script&gt;
&lt;style type="text/css"&gt;
    body 
    {
        margin:0px;
    }
    #overlay 
    {
        background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
    }
    .wikiform 
    {            
        background-color:Green; position:absolute;
    }
    .wikiform .wizard
    {
        clear: both;
    }
    .wizard
    {
        position: relative;
    left: 0; top: 0;
    width: 100%;
    list-style-type: none;

    }
    .wizard .view
    {            
        float:left;
    }
    .view .form
    {

    }        
    .navigation 
    {
        float:right; clear:left
    }
    #view1 
    {
        background-color:Aqua;
        width:300px;
        height:300px;

    }
    #view2
    {
        background-color:Fuchsia;
        width:300px;
        height:300px;           
    }
&lt;/style&gt;
&lt;title&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;&lt;form action="" method=""&gt;&lt;div id="layout"&gt;
    &lt;div id="header"&gt;
        Header
    &lt;/div&gt;
    &lt;div id="content" style="height:2000px"&gt;
        Content
    &lt;/div&gt;
    &lt;div id="footer"&gt;
        Footer
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="formView1" class="wikiform"&gt;
    &lt;div class="wizard"&gt;    
        &lt;div id="view1" class="view"&gt;
            &lt;div class="form"&gt;
                Content 1
            &lt;/div&gt;        
        &lt;/div&gt;
        &lt;div id="view2" class="view"&gt;
            &lt;div class="form"&gt;
                Content 2
            &lt;/div&gt;        
        &lt;/div&gt;             
    &lt;/div&gt;
    &lt;div class="navigation"&gt;
        &lt;input type="button" name="Back" value=" Back " /&gt;
        &lt;input type="button" name="Next " class="Next" value=" Next " /&gt;
        &lt;input type="button" name="Cancel" value="Cancel" /&gt;
    &lt;/div&gt;   
&lt;/div&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;
</code></pre>
