jquery - vTicker jQuery 插件，内容闪存

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>