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 に答える