Jquery plugin call not compatible with IE8

I'm a newbie to the world of Jquery and plugins. I've been experimenting with the serialscroll plugin as explained here-- http://flesler.blogspot.com/2008/02/jqueryserialscroll.html. I have this simple code defining the parameters:

jQuery(function( $ ){

        $('#screen').serialScroll({
        target:'#sections',
        items:'li', 
        axis:'xy',
        navigation:'#navigation li a',
        duration:700,
        force:true, 
            });
    });

Works perfectly in all browsers except IE8 . Gives an error "Jquery not defined line 1 char 1." Obviously I've the latest external serialscroll.js file so I know that's not the problem. Is the syntax something that IE8 is not happy with ?

Here is the full code :

JQUERY:

// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
    return -c * ((t=t/d-1)*t*t*t - 1) + b;
};

jQuery(function( $ ){

    $('#screen').serialScroll({
        target:'#sections',
        items:'li', 
        axis:'xy',
        navigation:'#navigation li a',
        duration:700,
        force:true, 
        onBefore:function( e, elem, $pane, $items, pos ){
            e.preventDefault();
            if( this.blur )
                this.blur();
        },
        onAfter:function( elem ){

        }
    });
});

CSS:

#screen{
    position:relative;
    height:700px;
    width:925px;
    margin-top:40px;
    }
#navigation{
    position:absolute;
    width:883px;
    height:77px;
    z-index:3;
    left: 84px;
    top: -17px;
        }
        #navigation ul{
            margin-left:10px !important;

        }
            #navigation li{
                float:left;
                padding-left:35px;


            }
                #navigation a{
                    font-weight:bolder;
                    text-decoration:none;
                    padding-left:25px;
                    float:left;
                }

#sections{
    position:absolute;
    overflow: hidden;
 开发者_如何转开发   width:510px;
    height:510px;
    z-index:3;
    left: 169px;
    top: 205px;
}

    #sections ul{
        width:3660px;
            }

        #sections li{
            left: 0px;
            top: 0px;
            padding-left:0;
            margin-left:0;
        }
        #sections p{
                width:550px;
                margin:16px 0;
                font-size:85%;
                line-height:1.4em;}

HTML :

<div id="screen">

<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</div>

<div id="sections"><ul>
<li><p>some text</p></li>
<li><p>some text</p></li>
<li><p>some text</p></li>
<li><p>some text</p></li>
</ul></div>

</div>

Remove the trailing comma on the line force:true, (so it reads force:true) - Internet Explorer does not like in the slightest when there is a comma but no additional property after it.