1

我在让我的 JQuery 向下滑动效果粘在我的标签（文本）上时遇到问题。

我的 CSS

html, body { 
    margin:0; 
    padding:0; 
}
body {
    background-color: #222222;
}
a {
    -moz-transition: all 200ms ease-in-out 0s;
    z-index:99 !important;
}
div#navigation {
    background-color: #333333;
    box-shadow: 0 0 16px #000000;
    min-height:200px;
    width: 100%;

}
ul#nav {
    list-style: none outside none;
    display:inline-table;
    margin: 0;
    z-index:1; /* ########################################################## */
    width: 100%;
}
#nav:after { content:""; clear:both; }
ul#nav li {
   /* background-color: #666666;*/
    border-bottom: 1px solid #333333;
    color: #FFFFFF;
    display:table-cell;
    max-width:80px; 
    min-height:40px;
    position:relative;
}
ul#nav li a {
    color: #999999;
    text-decoration: none;
}
ul#nav li a:hover {
    color: #FFFFFF;
}


/* ############################################################# */
/*  MAGIC li bg   */
#libg{
    background:#666;
    z-index:1;
    width:0px;
    position:absolute;
    max-width:200px;
    min-height:30px;
    margin:-20px 0 0 0;
    opacity:0;
    -moz-opacity:0.0;
}

我的 html

<body>
    <div id="navigation">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Software</a></li>
            <li><a href="#">Contact</a></li>

            <li><a href="#">Forum</a></li>
            <div style="clear:both"></div>
        </ul>
    </div>
</body>

我的jQuery

$('#nav li a').append('<div id="libg"></div>');
var posTop, liW, liH;
$('#nav li a').hover(function(){

    posTop = $(this).offset().top;

    liW = $(this).parent('li').width();
    liH = $(this).parent('li').height();

    $('#libg').css({ width: liW+'px' }).stop().animate({height: liH, opacity: '1'}, 500);

},function(){

    $('#libg').stop().animate({width: '0px', width: '0px' , opacity: '0'}, 0);

});

这是一个jsfiddle

4

1 回答 1

0

你有几个问题：

1）您正在创建具有相同 ID 的多个对象。考虑给添加的对象一个类。

2）您只捕获父对象的顶部位置topPos。包括父级的高度将允许您将对象定位在其底部。

更新了js

$('#nav li a').append('<div class="libg"></div>');

var posTop, liW, liH;
$('#nav li a').hover(function(){

    posTop = $(this).offset().top + $(this).outerHeight();

    liW = $(this).parent('li').width();
    liH = $(this).parent('li').height();

    $(this).children('.libg').css({ width: liW+'px'}).offset({top: posTop}).stop().animate({height: liH, opacity: '1'}, 500);

},function(){

    $(this).children('.libg').stop().animate({width: '0px', width: '0px' , opacity: '0'}, 0);

});

我在这里更新了你的代码：http: //jsfiddle.net/eUSNd/73/

于 2013-03-03T23:52:38.950 回答