Question

我想同时淡出/淡出。我有以下内容：

visiblePanel.fadeOut(FU.featureTiming.transition, function () {
    visiblePanel.next().fadeIn(FU.featureTiming.transition, function () {
        visiblePanel.next().find('img').removeClass('displayNone')
    });
});

如何淡出图像并同时淡入下一张图像。

Answer 1

只是不要在回调中调用下一个淡入淡出但立即调用它：

visiblePanel.fadeOut(FU.featureTiming.transition);
visiblePanel.next().fadeIn(FU.featureTiming.transition, function(){
    visiblePanel.next().find('img').removeClass('displayNone')
});

Answer 2

这是一个淡入淡出和另一个淡出的例子：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#box1').fadeOut('slow', function() {
                 // Animation complete
            });
            $('#box2').fadeIn('slow', function() {
                 // Animation complete
         });
});
</head>
<body>
    <div style="width:100px; height:100px; background-color:green" id="box1"></div>
    <div style="width:100px; height:100px; background-color:red; display:none"  id="box2"></div>
</body>
</html>

如果您希望事件同时发生，请不要使用回调。回调函数在动画终止时执行

Answer 3

function nextFadeIn（）{

    $('.fadeImg').eq($next).delay($interval).fadeIn($fadeTime);

    $('.fadeImg').eq($current).delay($interval).fadeIn($fadeTime, function() {
    $('.fadeImg').eq($next).delay($interval).fadeIn($fadeTime);
    }).end().eq($current).delay($interval).fadeOut($fadeTime, nextFadeIn);

    if($next < $('.fadeImg').find('img').length-1){ $next++; } else { $next = 0;}
    if($current < $('.fadeImg').find('img').length-1){ $current++; } else { $current =0; }
    $(".active").fadeOut($fadeTime);

};

同时淡入淡出

3 个答案: