Question

我无法在两个div之间实现简单的切换。我已经搜索过，其他人似乎也有这个问题，除了解决方案没有解决我的问题。我想有两个div，一个（wrapper_static）显示在页面加载，另一个隐藏在页面加载（wrapper_animation）。当我在wrapper_static中单击触发器div时，我希望wrapper_static淡出，然后将wrapper_animation淡入其中。

到目前为止，问题是只有wrapper_animation在切换时才有淡入淡出动画，而wrapper_static等待大约一秒然后突然消失。

如果有人可以帮我解决这个问题，我将非常感激。我很乐意提供所需的任何上下文详细信息。 HTML：

            <div id="wrapper_animation">
            <p>Yeah, it's working!</p>
        </div>

        <div id="wrapper_static" class="wrapper_dsk">
                <div id="hoverable" onclick="startDemo()" style="background-color:transparent;height:265px;width:500px;margin:auto;">
                    <span id="tooltip" style="z-index:5;position:absolute;margin-left:25px;">Click to see a cool transition!</span>
                    <object id="CSV" style="height:211px;width:300px;margin-left:50px;margin-top:50px;z-index:2;" type="image/svg+xml" data="images/logo.svg">Your browser does not support SVG. Sorry about that.</object>
                </div>
        </div>

CSS：

.wrapper_dsk {
display:block;
width:900px;
height:500px;
margin:auto;
margin-top:60px;
text-align:center;
opacity:1;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}

#hoverable {
    cursor:pointer;
}

#CSV {
    cursor:pointer;
    opacity:1;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

#tooltip {
    opacity:0;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}

#hoverable:hover #tooltip {
    opacity:1;
}

#hoverable:hover #CSV {
    opacity:0.8;
}

使用Javascript：

                    $( document ).ready(function() {
                    $( '#wrapper_animation' ).hide();
            });

            function startDemo(){
                $( '#wrapper_static' ).delay( 2000 ).fadeOut("medium");
                $( '#wrapper_animation' ).delay( 6000 ).fadeIn("medium");
            }

Answer 1

你的描述和延迟似乎是你的目标是在fadeOut完成后动画淡出，对吗？使用fadeOut's complete option来实现这一目标：

function startDemo(){
    $( '#wrapper_static' ).fadeOut("medium", function(){
        //when complete, fade the animation in
        $( '#wrapper_animation' ).fadeIn("medium");
    });
}

小提琴：http://jsfiddle.net/5DVEF/2/

jQuery .fadeOut没有正确消失

1 个答案: