Question

我正在尝试制作一个无限的旋转木马。我在我的HTML中有这个：

<div class="logo-mini-scroller floatInner toLeft">
    <span class="_l toLeft">
        <a href="javascript:void(0)"></a>
    </span>
    <div id="carousel_inner">
        <ul class="_cont toLeft" id="carousel_ul">
            <li class="mini-1">
                <a href="#"></a>
            </li>

            <li class="mini-2">
                <a href="#"></a>
            </li>

            <li class="mini-3">
                <a href="#"></a>
            </li>
        </ul>
    </div>
    <span class="_r toRight">
        <a href="javascript:void(0)"></a>
    </span>
</div>

我在我的javascript中有这个

$(document).ready(function() {  
    $('#carousel_ul li:first').before($('#carousel_ul li:last'));

    $('.logo-mini-scroller span._r.toRight').click(function(){  
        var item_width = $('#carousel_ul li').outerWidth() + 10;  
        var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  

        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  
            $('#carousel_ul li:first').insertAfter($('#carousel_ul li:last'));
            $('#carousel_ul').css({'left' : '-93px'});  
        });  
    });  

    $('.logo-mini-scroller span._l.toLeft').click(function(){
        var item_width = $('#carousel_ul li').outerWidth() + 10;  
        var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;  

        $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  
            $('#carousel_ul li:first').before($('#carousel_ul li:last'));  
            $('#carousel_ul').css({'left' : '-93px'});  
        });  

    });

    $('#carousel_ul li').click(function(){
        var self = this;

        $('#carousel_ul li').each(function(){
            if ($(this).hasClass('active')){
                $(this).removeClass('active');
            }

            $(self).addClass('active');
        })
    });

  });

函数前后的jQuery不起作用。所有动画效果都很好，但不会添加和附加元素。我也尝试了inserBefore和inserAfeter，但得到了相同的结果。

Answer 1

问题是你的动画功能。您需要在参数中设置完整选项。

而不是

{'left' : left_indent},{queue:false, duration:500},function(){

使用：

{'left' : left_indent},{queue:false, duration:500, complete: function(){

这是一个工作示例： https://jsfiddle.net/ufcmos2y/

之前的jQuery不起作用

1 个答案: