Question

所以，我有一个主页，我想在我们的赞助商旁边做一个小幻灯片。唯一的问题是，只要图像在teh div中的溢出中消失，就不会被隐藏。这是链接：

代码：

<!DOCTYPE html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="resources/main-style.css">
    <title>Mechadogs</title>
    <script>
        $(function(){  // $(document).ready shorthand
            $('#center').hide(); 
            $('#background').hide(); 
            $(".slogo").hide();
            $("#navigation").animate({top:"100%"});
            window.setTimeout(function(){$('#center').fadeIn('slow');$("#navigation").animate({top:"0"});
                                         $("#first").animate({top:"40%"});$('#background').fadeIn('slow');
                                        $("#sponsors").animate({top:"40%"})}, 1000);
            window.setTimeout(function(){$("#one").fadeIn("slow");}, 1500);

        });
    </script>
</head>


<body>
    <image style = "width:100%;" src = "http://mechadogs.org/DogFRC.jpg" id = "background"></image>
    <div id = "navigation">
        <ul id = "nav">
            <li><a href = "mechadogs.org/home" class = "navlink">Home</a></li>
            <li><a href = "mechadogs.org/team" class = "navlink">Our Team</a></li>
            <li><a href = "mechadogs.org/gallery" class = "navlink">Gallery</a></li>
            <li><a href = "mechadogs.org/community" class = "navlink">Community</a></li>
            <li><a href = "mechadogs.org/first" class = "navlink">FIRST</a></li>
        </ul>
    </div>
    <div id = "main-home">
        <div id = "center">5123<br>Mechadogs</div>
    </div>
    <div id = "first"><image id = "logo" src = "http://mechadogs.org/resources/images/FIRST.jpg"></image></div>
    <div id = "sponsors">
        <image class = "slogo" id = "one" src = "resources/images/sponsors/1.jpeg"></image>
        <image class = "slogo" id = "two" src = "resources/images/sponsors/2.jpeg"></image>
        <image class = "slogo" id = "three" src = "resources/images/sponsors/3.gif"></image>
        <image class = "slogo" id = "four" src = "resources/images/sponsors/4.jpeg"></image>
    </div>
</body>

风格：

.slogo{
    width:100%;
}
#sponsors{
    position:absolute;
    width:10%;
    top:150%;
    padding:20px;
    border-radius:50%;
    background-color:white;
    left:60%;
    height:20%;
    overflow:hidden;
    opacity:0.9%
}

淡入后如何隐藏溢出

0 个答案: