Question

我正在尝试制作“悬停”效果，这会改变li（列表）元素的高度但向上。使用jquery，我设法改变元素的高度但向下。是否有可能向上改变方向？

http://www.izrada-weba.com/vedranmarketic/

css文件：

body{
    background-color: #252524;
    text-align: center;
}

#centriranje{
    width: 1017px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#header{
    height: 90px;
    background: url(img/bg-head.gif) repeat-x;
    margin-top: 20px;
}
#logo{
    height: 90px;
    width: 237px;
    float: left;
}
#izbornik{
    width: 780px;
    height: 90px;
    float: left;
}
    #izbornik ul{
    margin: 39px 10px 0px 0px;
    padding: 0px;
    list-style-type: none;
    overflow: hidden;
    position: absolute;

    }
        #izbornik ul li{
            float: left;
            width: 36px;
            height: 41px;
            margin-right: 2px;
            background-position: top;
            background-repeat: no-repeat;
            border: 1px solid white;
        }
            #izbornik ul li#home{background-image: url(img/izbornik-home.gif);}
            #izbornik ul li#news{background-image: url(img/izbornik-news.gif);}
            #izbornik ul li#shop{background-image: url(img/izbornik-shop.gif);}
            #izbornik ul li#info{background-image: url(img/izbornik-info.gif);}

jquery文件：

$(document).ready(function(){
    $(".tab").fadeTo("fast", 0.7); // This sets the opacity of the thumbs to fade down to 30% when the page loads
    $(".tab").animate({height:'36px'},{queue:false,duration:500});

    $(".tab").hover(function(){
        $(this).fadeTo("fast", 1.0);
        $(this).animate({height:'41px'},{queue:false,duration:500});
    },function(){
        $(this).fadeTo("fast", 0.7);
        $(this).animate({height:'36px'},{queue:false,duration:500});
    });


});

HTML：

<body>
<div id="centriranje">

    <div id="header">
        <div id="logo"><a href="http://localhost/vedranmarketic"><img src="img/logo.jpg" width="237" height="64" border="0" /></a></div>

        <div id="izbornik">
            <ul>
                <li id="home" class="tab"></li>
                <li id="news" class="tab"></li>
                <li id="shop" class="tab"></li>
                <li id="info" class="tab"></li>
            </ul>
        </div>
    </div>


</div>
</body>

提前致谢！ ILE

Answer 1

通常您必须更改“顶部”位置以及高度，以便生成的位置与大小的变化量相同+/-。或者可以将一个元素从底部绝对定位在另一个元素中。（例如：position：absolute; bottom：40px）

jquery：改变向上方向的元素高度

1 个答案: