jquery: change height of element in upper direction_问答_开发者

jquery: change height of element in upper direction

开发者 https://www.devze.com 2022-12-18 00:57 出处：网络

I\'m trying to make \"hover\" effect which will change height of li (list) element but upward. Using jquery, I\'ve managed to change height of element but downwards.

I'm trying to make "hover" effect which will change height of li (list) element but upward. Using jquery, I've managed to change height of element but downwards. Is it possible to change direction upwards?

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

css file:

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/izbor开发者_JAVA百科nik-shop.gif);}
            #izbornik ul li#info{background-image: url(img/izbornik-info.gif);}

jquery file:

$(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>

Thanks in advance! Ile

Normally you have to change the 'top' position as well as the height so that the resulting position is +/- the same amount as the change in size. Alternately could could have an element absolutely positioned within another from the bottom. (for example: position:absolute; bottom: 40px)