javascript - 同时淡入淡出

Question

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

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

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

这是一个 div 淡入和另一个同时淡出的示例：

<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>

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

javascript - 同时淡入淡出

2 回答 2

Related

Reference