jquery: change height of element in upper direction -


i'm trying make "hover" effect change height of li (list) element upward. using jquery, i've managed change height of element downwards. possible 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/izbornik-shop.gif);}             #izbornik ul li#info{background-image: url(img/izbornik-info.gif);} 

jquery file:

$(document).ready(function(){     $(".tab").fadeto("fast", 0.7); // sets opacity of thumbs fade down 30% when 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 have change 'top' position height resulting position +/- same amount change in size. alternately could have element absolutely positioned within bottom. (for example: position:absolute; bottom: 40px)


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -