jQuery 滑动菜单悬停操作

发布于 2024-10-02 23:32:45 字数 1039 浏览 3 评论 0原文

好的，事情是这样的，我有 2 个 div，一个是我的导航，另一个具有与我的导航相同数量的 li 标签，其 id 几乎相同，这些 li 标签包含一个图形，当悬停导航时，它会滑动。让我解释一下......

这是我的导航

<ul id="navInside">
  <li><a id="nInicio" href="index.php" >Inicio</a></li>
  <li><a id="nHistoria" href="history.php" >Historia</a></li>
  <li><a id="nQuienes" href="aboutus.php" >Quienes somos</a></li>

这是应该移动

<ul id="navSlides">
  <li id="SnInicio"></li>
  <li id="SnHistoria"></li>
  <li id="SnQuienes"></li>

这是我现在得到的jQuery代码......

    $('#navInside li').hover(function (){
    $("#S" + this.id).animate({top: '0px'}, 500)}, function (){
    $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');} 
);

你可以吗帮我找到正确的选择器以使其发挥作用吗？

我被困了好几天了... 谢谢

原文

ok thing is like this, I got 2 divs, one is my navigation,
the other got the same number of li tags with almost same id's as my navigation, those li tags contains a graphic that suppose to slide when hover the nav.
Let me explain...

this is my nav

<ul id="navInside">
  <li><a id="nInicio" href="index.php" >Inicio</a></li>
  <li><a id="nHistoria" href="history.php" >Historia</a></li>
  <li><a id="nQuienes" href="aboutus.php" >Quienes somos</a></li>

this is what should move

<ul id="navSlides">
  <li id="SnInicio"></li>
  <li id="SnHistoria"></li>
  <li id="SnQuienes"></li>

This is the jQuery code i got now....

    $('#navInside li').hover(function (){
    $("#S" + this.id).animate({top: '0px'}, 500)}, function (){
    $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');} 
);

Can you help me get the right selector for this to work?

I been stuck for days...
Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风和你 2024-10-09 23:32:45

id 位于锚点上，而不是

（this 所指的），因此您的悬停应该是：

$('#navInside li a').hover(function (){
  $("#S" + this.id).animate({top: '0px'}, 500);
}, function (){
  $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');
});

或者，使用您拥有的代码并将 id 移至

，如下所示：

<ul id="navInside">
  <li id="nInicio"><a href="index.php" >Inicio</a></li>
  <li id="nHistoria"><a href="history.php" >Historia</a></li>
  <li id="nQuienes"><a href="aboutus.php" >Quienes somos</a></li>

The id is on the anchor, not the <li> (which this refers to) so your hover should be:

$('#navInside li a').hover(function (){
  $("#S" + this.id).animate({top: '0px'}, 500);
}, function (){
  $("#S" + this.id).animate({top: '-70px'}, 500, 'swing');
});

Or, use the code you have and move the id up to the <li>, like this:

<ul id="navInside">
  <li id="nInicio"><a href="index.php" >Inicio</a></li>
  <li id="nHistoria"><a href="history.php" >Historia</a></li>
  <li id="nQuienes"><a href="aboutus.php" >Quienes somos</a></li>

回复收藏 0 原文