php - jQuery，Sequence.js。插件无法启动，没有可见的错误

Question

我能想到的唯一一件事是，我在页面末尾插入了 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");
});

Answer 1

从README.md：

v0.9 19/3/2013

<ul>现在必须为顶层提供类.sequence-canvas以使 Sequence 工作

<ul class="sequence-canvas">

Answer 2

您是否尝试过使用不同的网络浏览器？我在使用 Chrome 时遇到了同样的问题。