大约 5 次迭代后 CSS 过渡中断答案

【问题标题】：CSS transition breaks after about 5 iterations大约 5 次迭代后 CSS 过渡中断
【发布时间】：2017-09-29 11:45:21
【问题描述】：

试图制作一个滑动的幻灯片遍历一组图像；该函数应该淡入每个元素，将其转换到另一个位置（通过 margin 属性），然后一个接一个地淡出。我的代码一直工作到大约 5 次迭代，然后开始移动错误的图像。

function transition(){

var preview=$('.noFrame-slideShow-container');
preview.hide();
i=0;

var current=preview.eq(i);
var prevWidth=parseInt(preview.css('width'));
var windowWidth=$(window).width();
distToEnd=windowWidth - (preview.offset().left + prevWidth);
var halfCont=parseInt($('.main-wrap-right-container').css('width'))/3;
var end=distToEnd - (halfCont*2.5);

function beginTransit(){
    var current=preview.eq(i);

    current.fadeIn(500,function(){
        console.log(i + ' i am i');
        current.css('transition','margin-left 1s');
        current.css('margin-left',end);
        current.on('transitionend',function(){
            current.fadeOut(500,function(){
                current.css('transition','');
                current.css('margin-left','0');
                if(i==preview.length-1){
                    i=0;
                    //console.log(i + " i was i")
                }else{
                    i++;
                    //console.log(i + " i was i")
                }
                beginTransit();
            })
        })
    })
}

beginTransit();

【问题讨论】：

您能否在问题中包含html 和css？

标签： javascript jquery css css-transitions css-animations

【解决方案1】：

试试这个更新 var current;

<div class="main-wrap-right-container">
        <div class="noFrame-slideShow-container">1</div>
        <div class="noFrame-slideShow-container">2</div>
        <div class="noFrame-slideShow-container">3</div>
        <div class="noFrame-slideShow-container">4</div>
        <div class="noFrame-slideShow-container">5</div>
    </div>

<script>

            var preview=$('.noFrame-slideShow-container');
            preview.hide();
            var i = 0;

            var current = preview.eq(i);
            var prevWidth = parseInt(preview.css('width'));
            var windowWidth = $(window).width();
            var distToEnd = windowWidth - (preview.offset().left + prevWidth);
            var halfCont = parseInt($('.main-wrap-right-container').css('width'))/3;
            var end = distToEnd - (halfCont*2.5);

            function beginTransit(){

                current.fadeIn(500, function() {

                    current.css('transition','margin-left 1s');
                    current.css('margin-left',end);

                    current.fadeOut(1500, function() {
                        if (i === preview.length-1) {
                            i = 0;
                            console.log('end');
                        } else {
                            console.log('not end');
                            i++;
                        }
                        console.log(i);

                        current = preview.eq(i);
                        current.css('transiton', '');
                        current.css('margin-left', 0);
                        beginTransit();

                    });

                });


            }

            beginTransit();
    </script>

【讨论】：