Question

我在页面加载时播放了一些视频。我已经隐藏了标题，但是当我使用fadeIn（）时，它没有显示。任何人都可以帮我解决这个问题吗？

<html>
<head>
    <style>
        #wrapper{width: 99%; margin: auto; text-align: center;}
        #header{width: 99%; margin: 35px auto; text-align: center; display: none;}
        #main{width: 99%; margin: 35px auto; text-align: center;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            Hello
        </div>
        <div id="main">
            <video width="600" height="400" autoplay>

                <source src="countdown.webm" type="video/webm">
                Your browser does not support the video tag.
            </video>

        </div>
    </div>
    <script src="jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function() {
            $("video").delay(5000).fadeOut(2000);
            $("header").show();
        });
    </script>
</body>
</html>

Answer 1

对于上面发布的特定代码，您调用“header”标记名称元素，而不是id ='header'div元素。将您的jquery部分更改为

$('#header').show();

或者如果你想做序列动画。只需在第一个动画完成后将第二个动画放入回调函数中。像

这样的东西

$("video").fadeOut(2000,function(){
   $("#header").show();
});

延迟和fadeIn（）后不会显示隐藏

1 个答案: