jquery：改變元素向上的高度

我試圖使「懸停」效果，這將改變高度li（列表）元素，但向上。使用jquery，我設法改變了元素的高度，但向下。是否可以向上改變方向？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

來源

2010-01-22 ilija veselica

您是否嘗試對高度進行動畫顯示更多背景圖片？ – BBonifield 2010-01-22 20:46:45

No. Backgroung在這裏完全可以看到。我試圖將li元素向上移動幾個像素，而不會影響其他li元素。 – 2010-01-22 20:55:45

這裏的白色邊框只是爲了更好地觀看效果 – 2010-01-22 20:57:08

通常情況下，您必須更改'頂部'位置以及高度，以便得到的位置與+/-的大小相同。或者可以將一個元素從底部完全放置在另一個元素內。（例如：位置：絕對;底部：40px）

來源

2010-01-22 20:50:36 Paul

我看到了...現在它的作品！謝謝保羅！ – 2010-01-22 21:02:41

感謝那些信息，我不知道 – 2010-01-26 09:47:15

jquery：改變元素向上的高度

回答

相關問題