JQuery中的同步动画函数_Jquery

JQuery中的同步动画函数

jquery

JQuery中的同步动画函数,jquery,Jquery,我想问一下，如何同步动画。当动画时间为100ms时，我的脚本工作正常。当我将动画时间增加到1000毫秒，并动态按下按钮时，我的程序将无法正常工作有人知道如何解决这个问题吗 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="http

我想问一下，如何同步动画。当动画时间为100ms时，我的脚本工作正常。当我将动画时间增加到1000毫秒，并动态按下按钮时，我的程序将无法正常工作

有人知道如何解决这个问题吗

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="js/pauseAnimation.js"></script>
    <style>
        /*ALL DIV WRAPPER;*/

        html {
            margin: 0 auto;
            padding: 0;
        }

        #horizontalSlider {
            position: relative;
            overflow: hidden;
            width: 400px;
        }

        #horizontalSlider ul {
            position: relative;
            height: 180px;
            list-style: none;
            overflow: hidden;
            padding: initial;
        left: 0;
            /*width: 1800px;*/
        }

        .left {
            float: left;
        }

        #horizontalSlider ul li {
           position: relative;
            display: block;
            float: left;
            /*width: 200px;*/
            /*border: 1px solid gold;*/
            opacity: 0.3;
            transition: opacity 1s;
            -webkit-transition: opacity 1s;
        }

        #horizontalSlider ul li:hover {
            opacity: 1.0;
            /*filter: alpha(opacity=1);*/  
            transition: opacity 1s;
            -webkit-transition: opacity 1s;
        }

        .all {
            margin: 0 auto;
            width: 550px;
        }

        .a {
            padding: initial;
            margin: initial;
            text-decoration: none;
            color: black;
        }
    </style>

    <script type="text/javascript">
    var totalWidth = 0; //width of all elements of li
    var numerOfChildlenElements = 0; // the number of children li
    var currentChild = 0; //first from left display element
    var left = 0; // distance from the start size of ul

        function moveRight() {
             if( currentChild == 3) {
            left = (-totalWidth + $("ul").children().eq((numerOfChildlenElements - 1)).width());
            currentChild = 0;
             }
             else {
            left -=  $("ul").children().eq(currentChild);
            ++currentChild;
             }

            $('#horizontalSlider ul').css('left', left);
                $('#horizontalSlider ul').animate({left: '-='+$("ul").children().eq(((currentChild == 0) ? (numerOfChildlenElements -1) : (currentChild - 1))).width() }, 1000, 'linear', function (){});
            }

            function moveLeft() {
            if(currentChild == 3 || currentChild == -1) {
            left = (- (2*totalWidth) + $("ul").children().eq((numerOfChildlenElements-1)).width() );
             currentChild = (numerOfChildlenElements - 2);
            }
            else {
            left += $("ul").children().eq(currentChild);
            --currentChild;
            }

            $('#horizontalSlider ul').css('left', left);
                    $('#horizontalSlider ul').animate({left: '+='+$("ul").children().eq((currentChild)).width() }, 1000, 'linear', function () {


                });
            }
        $(document).ready(function() {

            numerOfChildlenElements = $("ul").children().length;
            for(i = 0; i < numerOfChildlenElements; ++i)
                totalWidth += $("ul").children().eq(i).width();
        //three times to duplicate elements
        $('#horizontalSlider ul').css("width", (3*totalWidth));
        $('#horizontalSlider ul li').clone().appendTo('#horizontalSlider ul');
        $('#horizontalSlider ul li:lt('+ numerOfChildlenElements +')').clone().appendTo('#horizontalSlider ul');
        left = -totalWidth;
        $('#horizontalSlider ul').css('left', left);

        $("#left").click(function(){
            moveLeft();
        });

        $("#right").click(function(){
            moveRight();
        });
    });
    </script>
    </head>
    <body>

        <div class="all">
            <button id="left" class="left">LEFT</button>
            <div id="horizontalSlider" class="left">
            <ul>
                    <li>
                         <div><img src="http://th02.deviantart.net/fs71/150/f/2011/178/9/3/06272011___naruto_x_tayuya_by_dthegrimm-d3k6edx.jpg" alt="zdj1" /></div>
                         <div>1.Praesent at sapien</div>
                    </li>
                    <li>
                        <a href="http://www.onet.pl" target="_blank">
                        <div><img src="http://th01.deviantart.net/fs44/150/f/2009/068/6/3/new_naruto_7_class_by_unhai.jpg" alt="zdj2" /></div>
                        <div>2.Nullam ut varius.</div>
                        </a>
                    </li>
                    <li>
                        <div><img src="http://www.creetor.com/games/images/naruto-ninja-world-storm-2.png" alt="zdj3" /></div>
                        <div>3.P3t at vestibulum sapien,</div>
                    </li>
                    <li>
                        <div><img src="http://th06.deviantart.net/fs70/150/i/2012/352/0/6/naruto_uzumaki_vs_son_goku_by_pinkycute03-d5oej1r.jpg" alt="zdj4" /></div>
                        <div>4.Orange akcesoria still</div>
                    </li>
                </ul>
            </div>
            <button id="right" class="right">RIGHT</button>
        </div>    
    </body>
    </html>


在此处插入标题
/*所有DIV包装*/
html{
保证金：0自动；
填充：0；
}
#水平滑块{
位置：相对位置；
溢出：隐藏；
宽度：400px；
}
#水平滑块{
位置：相对位置；
高度：180像素；
列表样式：无；
溢出：隐藏；
填充：初始；
左：0；
/*宽度：1800px*/
}
.左{
浮动：左；
}
#水平滑动轴承{
位置：相对位置；
显示：块；
浮动：左；
/*宽度：200px*/
/*边框：1件纯金*/
不透明度：0.3；
过渡：不透明度1s；
-webkit转换：不透明度1s；
}
#水平滑块：悬停{
不透明度：1.0；
/*过滤器：alpha（不透明度=1）；*/
过渡：不透明度1s；
-webkit转换：不透明度1s；
}
.全部{
保证金：0自动；
宽度：550px；
}
.a{
填充：初始；
保证金：初始保证金；
文字装饰：无；
颜色：黑色；
}
var totalWidth=0//li的所有元素的宽度
var numberofchildlements=0；//孩子的数量是多少
var currentChild=0//从左开始的第一个显示元素
var left=0；//距ul起始尺寸的距离
函数moveRight（）{
如果（currentChild==3）{
左=（-totalWidth+$（“ul”）.children（）.eq（（子元素数-1））.width（））；
currentChild=0；
}
否则{
左-=$（“ul”）.children（）.eq（currentChild）；
++当前儿童；
}
$（'#水平滑块ul'）.css（'left'，left'）；
$（'#horizontalSlider ul'）。动画（{left:'-='+$（'ul”）.children（）.eq（（（currentChild==0）？（numberofchildlenelements-1）：（currentChild-1））.width（）}，1000，'linear'，function（）{}）；
}
函数moveLeft（）{
如果（currentChild==3 | | currentChild==1）{
左=（（2*totalWidth）+$（（“ul”）.children（）.eq（（numberofchildlenelements-1））.width（））；
currentChild=（子元素数-2）；
}
否则{
左+=$（“ul”）.children（）.eq（currentChild）；
--当前儿童；
}
$（'#水平滑块ul'）.css（'left'，left'）；
$（'#horizontalSlider ul'）。动画（{左：'+='+$（$）。子对象（）.eq（（currentChild））.width（）}，1000，'线性'，函数（）{
});
}
$（文档）.ready（函数（）{
NumberOfChildleElements=$（“ul”）.children（）.length；
对于（i=0；i

1.sapien的Praesent




3.P3t位于前庭智人，


4.橙色akcesoria蒸馏器


正确的