vTicker jQuery插件，内容flash

Question

我使用着名的jQuery vTicker插件进行垂直滚动内容。但是，当一个人加载页面时，内容“我的情况下的<li>元素”会出现几分之一秒，然后再次隐藏内容并开始按预期工作。

有解决方法吗？

这是我的代码：

    <script type="text/javascript">
        $(document).ready(function () {
            $('#lastminute').vTicker({
                speed: 500,
                pause: 3000,
                animation: 'fade',
                mousePause: true,
                showItems: 1
            });
        });
    </script>

    <div id="lastminute">
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </div>

Answer 1

为所有不想闪烁的元素添加一个类，如css属性为visibility:hidden的那些元素。

在$(document).ready()处理程序中删除此类。

这样，在您准备按照预期的方式显示元素之前，元素对用户是不可见的。

CSS -

.hideuntilready{
    visibility:hidden;
}

JS -

<script type="text/javascript">
    $(document).ready(function () {
        $('#lastminute').removeClass("hideuntilready").vTicker({
            speed: 500,
            pause: 3000,
            animation: 'fade',
            mousePause: true,
            showItems: 1
        });
    });
</script>

HTML -

<div id="lastminute" class="hideuntilready">
    <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    </ul>
</div>