jquery: изменить высоту элемента в верхнем направлении - PullRequest
Новая
       22

jquery: изменить высоту элемента в верхнем направлении

0 голосов
/ 22 января 2010

Я пытаюсь сделать эффект "зависания", который изменит высоту элемента 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);}

файл запроса: 

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

1 Ответ

3 голосов
/ 22 января 2010

Обычно вам нужно изменить как верхнюю позицию, так и высоту, чтобы результирующая позиция была на +/- такой же величины, как и изменение размера. Поочередно мог бы иметь элемент, абсолютно расположенный внутри другого снизу. (например: позиция: абсолютная; снизу: 40px)

...