Javascript 淡入后如何隐藏溢出_Javascript_Jquery_Html_Css

Javascript 淡入后如何隐藏溢出

javascript jquery html css

Javascript 淡入后如何隐藏溢出,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以，我有一个主页，我想做一个小幻灯片到我们的赞助商一边。唯一的问题是，每当图像在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/c

所以，我有一个主页，我想做一个小幻灯片到我们的赞助商一边。唯一的问题是，每当图像在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>

你能更新fiddle吗？我不知道如何处理图片。你的图片url仍然可以指向你的服务器，只是用来显示隐藏内容的内容，你应该使用淡出，不必担心，我决定使用一个预先制作的插件。

.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%
}