使用jQuery进行简单切换

Question

我有两个li我希望在悬停时切换，它很简单，但它没有像我期望的那样工作：

$('ul li:first').hover(function () {
    $(this).hide();
}, function () {
    $(this).show();
});

小提琴：http://jsfiddle.net/wg9cS/

在悬停时，我想要隐藏第一个，然后滑动第二个，但它现在有点波动。

Answer 1

这是因为当您隐藏元素时会触发mouseleave事件，因此会显示元素并再次触发mouseenter事件，即事件循环。

$('ul li:first').mouseenter(function () {
    $(this).hide();
});

$('ul li:eq(1)').mouseleave(function () {
    $(this).prev().show();
});

http://jsfiddle.net/wg9cS/2/

Answer 2

http://jsfiddle.net/wg9cS/6/

$('ul li:first').hover(function () {
    $(this).slideUp();
});

$('ul li:nth-child(2)').mouseleave(function () {
  $(this).parent().find(":first").slideDown();
});

这是一个幻灯片版本。编辑：undefined's更优雅。