Sliding box with caption_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-19 15:54 出处：网络

I have a sliding boxcaption and it works fine. But when you first view it has the box caption over it and then when you mouse over it works properly but it starts off with the caption on top. And I want the box caption only to show when the user mouses over the box. I cant figure out why it does that. It's kind of odd.

Take a look at it here so you can see what I am talking about.

http://ironbulldog.com/windows/test.html

Below is my source code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testing</title>
<style type="text/css">

    *{ padding:0px; margin:0px; }
    body{ background:#D5DEE7; }
    a{ color:#C8DCE5; }
    h3{ margin: 190px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

    .boxgrid{ 
        width: 325px; 
        height: 260px; 
        margin:10px; 
        float:left; 
        background:#161613; 
        border: solid 2px #8399AF; 
        overflow: hidden; 
        position: relative; 
    }
        .boxgrid img{ 
            position: absolute; 
            top: 0; 
            left: 0; 
            border: 0; 
        }
        .boxgrid p{ 
            padding: 0px 10px; 
            color:#afafaf; 
            font-weight:bold; 
 开发者_如何转开发           font:10pt "Lucida Grande", Arial, sans-serif; 
        }

    .boxcaption{ 
        float: left; 
        position: absolute; 
        background: #000; 
        height: 260px; 
        width: 100%; 
        opacity: .8; 
        /* For IE 5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For IE 8 */
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    }

</style>

<script type="text/javascript" src="http://www.microsoft.com/library/shared/jquery/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //To switch directions up/down and left/right just place a "-" in front of the top/left attribute
        //Vertical Sliding
        $('.boxgrid.slidedown').hover(function(){
            $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
        }, function() {
            $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:300});
        });

        //Header Text Comes in Later
        $('.boxgrid.slidedown').hover(function(){
            $(".delay", this).stop().animate({top:'0px'},{queue:false,duration:500});
        }, function() {
            $(".delay", this).stop().animate({top:'260px'},{queue:false,duration:500});
        });
    });
</script>

</head>

<body>        
    <div class="boxgrid slidedown">
        <img src="jareck.jpg"/>
        <div class="cover boxcaption">
            <div class="delay boxcaption">
            <h3>The Nonsense Society</h3>
            </div>
    </div>
    </div>

</body>
</html>

Add this line to your css