Question

我真的很混淆这个悬停功能。因此，当你将鼠标移到“列表1”时，它将DROP / SLIDE LAST / PREVIOUS“Answer”div，你将鼠标悬停在右边 - 那么---在“列表1”的“答案”div中淡入/滑入。等等。几乎滑出最后的“回答”div然后FADE IN / SLIDE在你悬停的新“回答”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但无法使其正常工作:(

Answer 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：这只适用于你一次悬停一个元素列表（即直到动画结束）。如果需要快速悬停在多个元素上，则需要再解除绑定并再次绑定或使用某些锁定。

清单<li>，FadeOut上一个</li> <li>然后FadeIn下一个</li> <li>悬停</li>

1 个答案: