Question

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

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

过去几天我一直在努力，但觉得我现在只是让事情变得更糟！

对此有任何帮助或建议将不胜感激。

这是我的小提琴：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

我认为你真正需要的是：

http://jsfiddle.net/NZ2QL/25/

$(".menuItem").mouseover(function () {
    var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
    tab.stop().animate({
        width: "190px"
    }, 1000);
});
$(".menuItem").mouseout(function () {
    var tab = $('.tab[data-id="'+$(this).data('id')+'"]').first();
    tab.stop().animate({
        width: "0px"
    }, 1000);
});

一篇有趣的文章可能会有所帮助： http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

干杯;）

Answer 2

`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>，所以我甚至改变了你所提供的小提琴中错误的位置......

注意：此任务可以使用纯css完成，它会更轻

更新不是问题的一部分：

`The same above feature using plain css`

Answer 3

我建议将mouseout事件放在.tab类上，你应该得到你想要的。我会在一秒钟内更新你的小提琴，告诉你我的意思。

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

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

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

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

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



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

http://jsfiddle.net/NZ2QL/11/

这有点接近，但仍需要一些修复。

这应该是你需要的。我可以将它清理一下以压缩代码，但功能是你想要的，我很确定。 http://jsfiddle.net/NZ2QL/76/

我的最终编辑：

$(".menuItem li").hover(
function() {
    $(this).stop().animate({"width":"250px"}, {queue:false, duration:1000});
    $(this).children(".tab").animate({"width":"190px"}, {queue: false, duration:1000})},
function(){
    $(this).stop().animate({"width":"60px"}, {queue:false, duration:1000});
    $(this).children(".tab").animate({"width":"0px"}, {queue: false, duration:1000})}
);

修改后的HTML和CSS在这里： http://jsfiddle.net/NZ2QL/81/

JQuery动画垂直菜单

3 个答案:

`Demo Fiddle`

`The same above feature using plain css`