Jquery插件调用与IE8不兼容

时间:2011-05-31 16:35:54

标签: jquery plugins internet-explorer-8

我是Jquery和插件世界的新手。我一直在尝试使用这里解释的serialscroll插件 - http://flesler.blogspot.com/2008/02/jqueryserialscroll.html。我有这个简单的代码定义参数:

jQuery(function( $ ){

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

在IE8以外的所有浏览器中都能完美运行。给出错误“Jquery not defined line 1 char 1.”显然我有最新的外部serialscroll.js文件所以我知道这不是问题。语法是IE8不满意的吗?

以下是完整代码:

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>

1 个答案:

答案 0 :(得分:2)

删除行force:true,上的尾随逗号(因此它显示为force:true) - 当有逗号但后面没有附加属性时,Internet Explorer不会有任何想法。