Jquery, Sequence.js.插件没有启动,没有可见的错误


Jquery, Sequence.js. Plugin does not start, no visible errors

我唯一能想到的是我在页面的末尾插入javascript,而不是在head标签中,但这以前从来没有出现过问题。

以下HTML:

<div id="sequence">
    <ul>
        <li class="animate-in">
            <div class="frame f1">
                <a href="/projects/3">
                    <img src="../../assets/projects/02.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design & Build</h1>
                        <h2>Private Villa - Muharraq</h2>
                    </div>
            </div>
        </li>
        <li>
            <div class="frame f2">
                <a href="/projects/2">
                    <img src="../../assets/projects/03.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design </h1>
                        <h2>Private Villa - Saar</h2>
                    </div>
            </div>
        </li>
        <li>
            <div class="frame f3">
                <a href="/projects/1">
                    <img src="../../assets/projects/01.jpg"/>
                </a>
                    <div class="project_info">
                        <h1>Landscape Design & Build</h1>
                        <h2>Private Villa - Riffa</h2>
                    </div>
            </div>
        </li>
    </ul>
</div>

由以下PHP模板生成:

<div id="sequence">
    <ul>
        <?php
            $count = 1;
            foreach ($projects as $project) { ?>
                <li<?php if ($count == 1) { ?> class="animate-in"<?php } ?>>
                    <div class="frame f<?php echo $count; ?>">
                        <a href="/projects/<?php echo $project['id']; ?>">
                            <img src="../../assets/projects/<?php echo $project['image']; ?>" />
                        </a>
                        <div class="project_info">
                            <h1><?php echo $project['type']; ?></h1>
                            <h2><?php echo $project['name']; ?></h2>
                        </div>
                    </div>
                </li>
                <?php $count++;
            }
        ?>
    </ul>
</div>

与以下CSS:

#sequence {
    /*visibility: hidden;*/
    position: relative; /* required */
    width: 830px;
    height: 320px;
    margin: 10px auto;
    overflow: hidden;
}
    #sequence > ul li > * {
        position: absolute; /* required */
    }
    #sequence > ul > li {
        position: absolute; /* required */
        width: 100%; /* required */
        height: 100%;
        z-index: 1; /* required */
    }
    #sequence .frame {
        background: #CCCCCC;
    }
    #sequence .f1 {
        left: -1000px;
        -webkit-transition-duration: 1s;
        -moz-transition-duration: 1s;
        -o-transition-duration: 1s;
        -ms-transition-duration: 1s;
        transition-duration: 1s;
    }

我像这样开始序列:

$(document).ready(function() {
    // slider
    var options = {
        autoPlay: true,
        autoPlayDelay: 3000
    };
    $("#sequence").sequence(options).data("sequence");
});

来自README.md:

v0.9 19/3/2013

顶级<ul>现在必须被赋予.sequence-canvas类以使序列工作

<ul class="sequence-canvas">

您尝试过使用不同的浏览器吗?当我使用Chrome浏览器时,我有同样的问题。