请教一个JavaScript的效果

发布网友发布时间：2022-05-18 08:14

共1个回答

热心网友时间：2022-05-18 09:44

HTML：

CSS：

/* 大小尺寸位置等请自行修改 */
/* 支持CSS3的浏览器可以免去JS代码，直接用CSS完成了 */
#box-out{
    position:relative;
    width:500px;
    height:400px;
}
#box-in1,
#box-in2{
    background:#666;
    color:#FFF;
    text-align:center;
    line-height:80px;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:400px;
    z-index:100;
    -webkit-transition:all .3s ease-out;
    -moz-transition:all .3s ease-out;
    -ms-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    transition:all .3s ease-out;
}
#box-in2{
    z-index:101;
    background:#F90;
    opacity:0.7;
}
#box-out:hover #box-in2{
    height:80px;
}

不支持CSS3的时候，应用这段JS代码（基于jQuery）：

$(function(){
    $("#box-out").hover(function(){
        $("#box-in2").stop().animate({height:80},300);
    },function(){
        $("#box-in2").stop().animate({height:400},300);
    });
});