Question

我正在尝试创建一个显示数据库结果的垂直旋转器。它有点适用于Safari和IE，但在Chrome中它根本没有动画效果。它只是替换了第一个项目..

我也试图为每个其他结果获得不同的背景，但我使用的方法仅在第一次显示结果时工作，而不是在循环时...

<ul class="container">
    <? $numRes=1 ; $sql_list="SELECT * FROM jobopenings WHERE aktiv = 1 ORDER BY position_id DESC" ; $result_list=mysql_query($sql_list); while($sql_list1=mysql_fetch_array($result_list)) { ?>
    <? $numRes++; ?>
    <li <? if($numRes&1) { echo 'style="background-color:#f7f7f7;position:relative;"'; } else { echo 'style="background-color:#e7e3e3;position:relative;"'; } ?>><a href="#" ); ?><? echo $sql_list1['position_id']; ?>"><? echo $sql_list1['navn'];     ?><br/><span style="font-size:11px;">- <? echo $sql_list1['oppdragsgiver']; ?> (<? echo   $sql_list1['location']; ?>)</span></a>
    </li>
    <?php } ?>
</ul>
<script type="text/javascript">
    var x = 0,
        container = $('.container'),
        items = container.find('li'),
        containerHeight = 0,
        numberVisible = 5,
        intervalSec = 2000;

    if (!container.find('li:first').hasClass("first")) {
        container.find('li:first').addClass("first");
    }

    items.each(function() {
        if (x < numberVisible) {
            containerHeight = containerHeight + $(this).outerHeight();
            x++;
        }
    });

    container.css({
        height: containerHeight,
        overflow: "hidden"
    });

    function vertCycle() {
        var firstItem = container.find('li.first').html();

        container.append('<li>' + firstItem + '</li>');
        firstItem = '';
        container.find('li.first').animate({
            marginTop: "-58.5"
        }, 1950, function() {
            $(this).remove();
            container.find('li:first').addClass("first");
        });
    }

    var init = setInterval("vertCycle()", intervalSec);

    container.hover(function() {
        clearInterval(init);
    }, function() {
        init = setInterval("vertCycle()", intervalSec);
    });
</script>

jquery动画在Chrome中无效

0 个答案: