0

我正在组装的淡入淡出动画有一个小问题。
它通过动画两次正常运行，并且包括一个正常运行的包装。

在第二个包裹上，它会捕捉到第一张照片，而不是淡入淡出。
我看了一点延迟，但是第一次正常工作，我不太确定从这里去哪里。

有人可以帮忙吗？
感谢大家。

链接到 JSFiddle：http: //jsfiddle.net/REbuy/1/

代码示例如下

jQuery：

var speed = 2000;
function switcher(){
$('.next').animate({opacity:1}, speed, 'linear', function()
    {
        $('.current').removeClass('current');
        $(this).addClass('current');
        $('.next+li').addClass('next');
        $(this).removeClass('next');
        $('.next').css('opacity',0);
        checker();
    });
}

function checker(){
        if($('.w-slides li:last').hasClass('current'))
        {
            $('.w-slides li:first').addClass('next');
        }
        else if($('.w-slides li:first').hasClass('next') && $('.w-slides li:last').hasClass('current'))
        {

            $('.w-slides li:first').addClass('current');        
            $('.w-slides li.current+li').addClass('next');
            $('.w-slides li:first').removeClass('next');
        }
    switcher();
    }
switcher();

HTML：

<div>
    <div class="w-fader">
        <ul class="w-slides">
            <li class="current"><img src="fader-img-1.png" /></li>
            <li class="next"><img src="fader-img-2.png" /></li>
            <li><img src="fader-img-3.png" /></li>      
        </ul>
    </div>
</div>
4

1 回答 1

1

您的问题是当您包装时，您没有将第一项的不透明度设置回零。

我将您的checker功能更改为：

function checker(){
if($('.w-slides li:last').hasClass('current'))
    {
        $('.w-slides li:first').addClass('next').css('opacity',0);
    }
}

它似乎工作

我想或者，您可以将呼叫移至checker切换器中设置不透明度的行之前。

于 2013-04-23T13:27:16.840 回答