List of <li>，FadeOut the previous <li>，FadeIn the next <li> on hover
List of <li>，FadeOut the previous <li>，FadeIn the next <li> on hover
提问于 2011-11-03 23:46:40
我真的对这个悬停函数感到困惑。因此，当你回答“列表1”时，它会将你悬停在右边的最后一个/前一个“答案”目录放到/滑动-然后-在“列表1”的“mouseOver”目录中淡入/滑动。诸若此类。差不多就是滑出上一个“答案”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但不能让它工作:(
回答 1
Stack Overflow用户
发布于 2011-11-11 12:12:13
我举了一个简短的例子来说明我认为你需要什么：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:这只有当你一次悬停一个元素列表时才有效(即。直到动画完成)。如果您需要快速悬停在多个元素上，则需要解除绑定并再次绑定，或者使用一些锁定。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8003365
复制相关文章
点击加载更多
相似问题
理解RxJava基础
RxJava可观察到可完成，如何避免toBlocking()
取消订阅不会级联回RxJava中可观察到的基础
取消订阅时可观察到rxJava停止
当可观察到的映射为可完成时，不调用RxJava2订阅
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
