javascript - jQuery 动画垂直菜单

Question

我正在尝试创建一个包含一些动画的垂直菜单。

我希望用户将鼠标悬停在触发元素宽度扩展并显示一些文本的元素的一部分上。

过去几天我尝试过，但感觉我现在只会让事情变得更糟!

如有任何帮助或建议，我们将不胜感激。

这是我的 fiddle :http://jsfiddle.net/danieljoseph/NZ2QL/3/

这是 JQuery:

$("nav li").hover(function () {
  $("nav li").css('width', 'auto');
});

$("#about-btn").mouseover(function () {
  $("#about-btn .tab").animate({
    width: "190px"
}, 1000);
});
$("#about-btn").mouseout(function () {
  $("#about-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#services-btn").mouseover(function () {
  $("#services-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#services-btn").mouseout(function () {
  $("#services-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#work-btn").mouseover(function () {
  $("#work-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#work-btn").mouseout(function () {
  $("#work-btn .tab").animate({
    width: "0"
  }, 1000);
});

$("#contact-btn").mouseover(function () {
  $("#contact-btn .tab").animate({
    width: "190px"
  }, 1000);
});
$("#contact-btn").mouseout(function () {
  $("#contact-btn .tab").animate({
    width: "0"
  }, 1000);
});

我是 JQuery 的业余爱好者，所以如果可能的话，任何提示和解释都会很棒。

谢谢。

Answer 1

Demo Fiddle

jQuery 代码

$("nav li").hover(function () {
    console.log($(this).children().children('.tab'));
    $(".tab", this).stop().animate({
        width: "190px"
    }, 1000);
}, function () {
    $(".tab", this).stop().animate({
        width: "0"
    }, 1000);
});  

根据我的说法，<ul> 的直接子代只能是 <li>所以我什至改变了你给的 fiddle 中错误的位置......

注意:这个任务可以使用纯 css 来完成，这样会轻得多

---

更新不是问题的一部分:

The same above feature using plain css