jquery - 如何淡出一个 div 并淡入另一个？

Question

我的目标是:

• 鼠标悬停时，淡出“foo”并淡入“bar”
• 鼠标移开时，淡出“bar”并淡入“foo”

我可以在鼠标悬停时淡出“foo”，但是当我将鼠标移到“bar”div 之外时，我无法淡入“bar”然后返回正常状态。

我有以下代码:

html

<ul>
  <li>
    <div class="foo"></div>
    <div class="bar"></div>
  </li>
  <li>
    <div class="foo"></div>
    <div class="bar"></div>
  </li>
</ul>

CSS

li .bar { display: none; }

js

// On mouse over, fade out 'foo' and fade in 'bar'
jQuery('.foo').mouseover(function() {
  jQuery(this).fadeOut(function() {
    jQuery('.bar').fadeIn(); <-- This is wrong. I need to get the bar inside this li
});

// On mouse out, fade out 'bar' and fade in 'foo'
jQuery('.bar').blur(function() {
  jQuery(this).fadeOut(function() {
    jQuery('.foo').fadeIn();
});

这是我糟糕的 jsFiddle 尝试:http://jsfiddle.net/TvCT5/2/

感谢向正确方向的插入 :)

Answer 1

这就是您想要的效果吗？

jsFiddle example

jQuery:

jQuery('.foo').mouseover(function(){
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();});
});
jQuery('.bar').mouseout(function(){
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();});
});