JQuery父标签不粘连

我有问题让我的JQuery滑动效果粘到我的标签（文本）。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

来源

2013-03-03 jash

我的道歉http://jsfiddle.net/eUSNd/53/ – jash 2013-03-03 23:29:31

你有几个问题：

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-03 23:52:38 Jesse

我感谢您的帮助..但我仍然有一个问题让他们实际上在文本背后滑动（滑动）。它们现在出现在文本下方。 – jash 2013-03-03 23:58:20

我想我误解了你的问题。你想让'libg'在菜单项上滑下来？ – Jesse 2013-03-04 00:02:33

基本上是的。我很感激你附上标签，但我希望它能够像这样在文字下滑动... – jash 2013-03-04 00:03:28

JQuery父标签不粘连

回答

相关问题