jquery - 使用 jQuery 进行简单切换

Question

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

$('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();
});

这是一个可以滑动的版本。编辑：未定义的更优雅。