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：改变元素向上的高度

回答

相关问题