<li> 列表，在悬停时淡出前一个 <li> 然后淡入下一个 <li>答案

【问题标题】：List of <li>, FadeOut the previous <li> then FadeIn the next <li> on hover<li> 列表，在悬停时淡出前一个 <li> 然后淡入下一个 <li>
【发布时间】：2011-11-03 23:46:40
【问题描述】：

我真的对这个悬停功能感到困惑。因此，当您将鼠标悬停在“列表 1”上时，它将拖放/滑动您悬停到右侧的最后/上一个“答案”div ---然后---淡入/滑入“列表 1”的“答案”div .等等。几乎滑出最后一个“答案”div，然后淡入/滑入您悬停的新“答案”div。这有意义吗？真的需要你的指导！

假设这是列表，例如：

<ul id="questions">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>

假设这是上面列表中每个问题的答案：

<div id="answer1">Answer 1</div>
<div id="answer2">Answer 2</div>
<div id="answer3">Answer 3</div>

这是我的 jQuery 代码：

$("ul#questions li").hover(
    function(){$('#answer1').hide("drop", { direction: "right" }, 800);},
    // this is where i'm lost, is it li:next fadeIn something like that ?? pls help
 );

看到这个页面：http://forum.jquery.com/topic/fadeout-fadein-question，但不能让它工作:(

【问题讨论】：

标签： jquery html hover fadein fadeout

【解决方案1】：

我已经做了一个简短的例子来说明我认为你需要什么：http://jsfiddle.net/gyhYa/

CSS：

div {
    background: green;
    height: 50px;
    display: none;
}

Javascript：

$('#questions li').hover(showAnswer, function(){});

function showAnswer() {
    var idx = $(this).text().replace(/[^0-9]/g, '');
    var answer = $('#answer' + idx);
    var visible = $('div:visible');
    if (! visible.length) {
        visible = $('div:first');
    }
    visible.fadeOut(function() {
        answer.fadeIn();
    });
}

PS：这仅在您一次悬停一个元素列表时才有效（即直到动画完成）。如果您需要快速将鼠标悬停在多个元素上，则需要取消绑定并再次绑定或使用一些锁定。

【讨论】：